Don’t Make Me Think, Revisited
A Common Sense Approach to Web Usability
版权所有 © 2014 史蒂夫·克鲁格
Copyright © 2014 Steve Krug
New Riders
www.newriders.com
要报告错误,请将注释发送至errata@peachpit.com
New Riders 是 Pearson Education 旗下部门 Peachpit 的印记。
New Riders
www.newriders.com
To report errors, please send a note to errata@peachpit.com
New Riders is an imprint of Peachpit, a division of Pearson Education.
编辑:Elisabeth Bayle
项目编辑:Nancy Davis
制作编辑:Lisa Brazieal
文案编辑:Barbara Flanagan
室内设计和构图:Romney Lange
插图由 Mark Matcho 和 Mimi Heft
Farnham 字体由 The Font Bureau, Inc. 提供 ( www.fontbureau.com )
Editor: Elisabeth Bayle
Project Editor: Nancy Davis
Production Editor: Lisa Brazieal
Copy Editor: Barbara Flanagan
Interior Design and Composition: Romney Lange
Illustrations by Mark Matcho and Mimi Heft
Farnham fonts provided by The Font Bureau, Inc. (www.fontbureau.com)
权利通知
Notice of Rights
版权所有。未经出版商事先书面许可,不得以任何方式(电子、机械、复印、录制或其他方式)复制或传播本书的任何部分。有关获得转载和摘录许可的信息,请联系permissions@peachpit.com。
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact permissions@peachpit.com.
责任通知
Notice of Liability
本书中的信息按“原样”发布,不提供任何保证。尽管在编写本书时已采取一切预防措施,但作者和 Peachpit 均不对任何个人或实体因本书中的说明直接或间接造成或声称造成的任何损失或损害承担任何责任或其中描述的计算机软件和硬件产品。
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it.
商标
Trademarks
It's not Rocket Surgery™ 是 Steve Krug 的商标。
制造商和销售商用来区分其产品的许多名称都被称为商标。如果这些名称出现在本书中,并且 Peachpit 知道商标声明,则这些名称是按照商标所有者的要求出现的。本书中提到的所有其他产品名称和服务仅以编辑方式使用,并且是为了这些公司的利益,无意侵犯商标。此类使用或任何商品名称的使用均无意于表达对本书的认可或其他联系。
It’s not rocket surgery™ is a trademark of Steve Krug.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.
ISBN-13: 978-0-321-96551-6
ISBN-10: 0-321-96551-5
ISBN-13: 978-0-321-96551-6
ISBN-10: 0-321-96551-5
9 8 7 6 5 4 3 2 1
9 8 7 6 5 4 3 2 1
在美国印刷和装订
Printed and bound in the United States of America
对于一直希望我写一本书的父亲,
To my father, who always wanted me to write a book,
我的妈妈总是让我觉得我可以,
My mother, who always made me feel like I could,
梅兰妮嫁给了我——这是我一生中最大的幸运,
Melanie, who married me—the greatest stroke of good fortune of my life,
还有我的儿子哈利,只要他愿意,他肯定会写出比这本书更好的书。
and my son, Harry, who will surely write books much better than this one whenever he wants to.
第二版
Second Edition
感谢我的哥哥菲尔,他一生都是一个正人君子。
To my big brother, Phil, who was a mensch his whole life.
第三版
Third Edition
致所有十四年来一直对这本书如此友善的人们——来自世界各地的人们。您本人、电子邮件和博客中的善意之言是我一生中最大的乐趣之一。
To all the people—from all parts of the world—who have been so nice about this book for fourteen years. Your kind words—in person, in email, and in your blogs—have been one of the great joys of my life.
尤其是那个女人,说得她笑得鼻涕都流出来了。
Especially the woman who said it made her laugh so hard that milk came out of her nose.
清嗓子和免责声明
Throat clearing and disclaimers
CHAPTER 1 Don’t make me think!
克鲁格第一可用性定律
Krug’s First Law of Usability
CHAPTER 2 How we really use the Web
扫描、满足、蒙混过关
Scanning, satisficing, and muddling through
CHAPTER 3 Billboard Design 101
设计是为了扫描,而不是阅读
Designing for scanning, not reading
CHAPTER 4 Animal, Vegetable, or Mineral?
为什么用户喜欢盲目选择
Why users like mindless choices
不为网络写作的艺术
The art of not writing for the Web
CHAPTER 6 Street signs and Breadcrumbs
设计导航
Designing navigation
CHAPTER 7 The Big Bang Theory of Web Design
让人们迈出正确步伐的重要性
The importance of getting people off on the right foot
MAKING SURE YOU GOT THEM RIGHT
CHAPTER 8 “The Farmer and the Cowman Should Be Friends”
为什么大多数关于可用性的争论都是浪费时间,以及如何避免它们
Why most arguments about usability are a waste of time, and how to avoid them
CHAPTER 9 Usability testing on 10 cents a day
保持测试简单——这样你就做得足够了
Keeping testing simple—so you do enough of it
LARGER CONCERNS AND OUTSIDE INFLUENCES
CHAPTER 10 Mobile: It’s not just a city in Alabama anymore
欢迎来到 21 世纪。您可能会感到轻微的眩晕感
Welcome to the 21st Century. You may experience a slight sense of vertigo
CHAPTER 11 Usability as common courtesy
为什么您的网站应该是一个正派的网站
Why your Web site should be a mensch
CHAPTER 12 Accessibility and you
正当你以为大功告成时,一只背上绑着黄油吐司的猫飘过
Just when you think you’re done, a cat floats by with buttered toast strapped to its back
CHAPTER 13 Guide for the perplexed
让可用性在您居住的地方发生
Making usability happen where you live
People come and go so quickly here!
——《绿野仙踪》 (1939 年)中的多萝西·盖尔(朱迪·嘉兰)
—DOROTHY GALE (JUDY GARLAND) IN THE WIZARD OF OZ (1939)
我早在 2000 年就写了第一版《别让我思考》。
I wrote the first edition of Don’t Make Me Think back in 2000.
到 2002 年,我开始每年收到几封读者的电子邮件(非常礼貌地)询问我是否考虑过更新它。不抱怨;只是想帮忙。“很多例子都已经过时了”是通常的评论。
By 2002, I began to get a few emails a year from readers asking (very politely) if I’d thought about updating it. Not complaining; just trying to be helpful. “A lot of the examples are out of date” was the usual comment.
我的标准回应是指出,由于我是在互联网泡沫破裂时写的,所以我用作示例的许多网站在其发布时已经消失了。但我认为这并没有让这些例子变得不那么清晰。
My standard response was to point out that since I wrote it right around the time the Internet bubble burst, many of the sites I used as examples had already disappeared by the time it was published. But I didn’t think that made the examples any less clear.
最后,在 2006 年,我有强烈的个人动机去更新它。1但当我重读它,看看我应该改变什么时,我只是一直在想“这一切仍然是真的。” 我真的找不到太多我认为应该改变的地方。
Finally, in 2006 I had a strong personal incentive to update it.1 But as I reread it to see what I should change, I just kept thinking “This is all still true.” I really couldn’t find much of anything that I thought should be changed.
1 这本书的一半版税交给了一家已不复存在的公司,而制作新版本对我来说意味着一份新合同,以及两倍的版税。
1 Half of the royalties for the book were going to a company that no longer existed, and doing a new edition meant a new contract—and twice the royalties—for me.
不过,如果这是一个新版本,那么有些东西就必须有所不同。于是我添加了 2000 年我没时间读完的三章,按下暂停按钮,然后愉快地把被子盖在头上,又过了七年。
If it was a new edition, though, something had to be different. So I added three chapters that I didn’t have time to finish back in 2000, hit the snooze button, and happily pulled the covers back over my head for another seven years.
2000年
2000
2006年
2006
(写作对我来说真的很难,而且我总是很高兴有理由不这样做。随时给我一个很好的旧根管治疗来代替写作。)
(Writing is really hard for me, and I’m always happy to have a reason not to do it. Give me a good old root canal over writing any day.)
那么为什么现在终于推出了新版本呢?有两个原因。
So why now, finally, a new edition? Two reasons.
在这一点上毫无疑问:它感觉已经过时了。毕竟它已经十三岁了,相当于互联网时代一百年了。(看到了吗?甚至没有人再说“在互联网时代”这样的话了。)
There’s no doubt about it at this point: It feels dated. After all, it’s thirteen years old, which is like a hundred years in Internet time. (See? Nobody even says things like “in Internet time” anymore.)
我用来举例的大多数网页,例如参议员奥林·哈奇 (Orrin Hatch) 2000 年大选的竞选网站,现在看起来确实过时了。
Most of the Web pages I used for examples, like Senator Orrin Hatch’s campaign site for the 2000 election, look really old-fashioned now.
正如您所料,如今的网站往往看起来更加复杂。
Sites these days tend to look a lot more sophisticated, as you might expect.
最近我开始担心这本书最终会达到一个让人感觉过时的地步,以至于不再有效。我知道这还没有发生,因为
Recently I’ve been starting to worry that the book would finally reach a point where it felt so dated that it would stop being effective. I know it hasn’t happened yet because
它的销售仍在稳定(谢天谢地),没有任何放缓的迹象。它甚至成为很多课程的必读内容,这是我始料未及的。
It’s still selling steadily (thank heavens), without any sign of slowing down. It’s even become required reading in a lot of courses, something I never expected.
来自世界各地的新读者继续在推特上分享他们从中学到的东西。
New readers from all over the world continue to tweet about things they’ve learned from it.
我仍然不断听到这个故事:“我把它给了我的老板,希望他最终能明白我在说什么。他真的读了它,然后为我们整个团队/部门/公司购买了它!” (我喜欢这个故事。)
I still keep hearing this story: “I gave it to my boss, hoping he’d finally understand what I’m talking about. He actually read it, and then he bought it for our whole team/department/company!” (I love that story.)
人们不断告诉我,他们得到这份工作的部分原因是阅读了这本书,或者它影响了他们对职业的选择。2
People keep telling me that they got their job thanks in part to reading it or that it influenced their choice of a career.2
2 我非常高兴和受宠若惊,但我必须承认我内心总有一部分在想“哎呀!我希望她不是想成为一名脑外科医生。我做了什么?”
2 I’m enormously pleased and flattered, but I have to admit there’s always a part of me that’s thinking “Yikes! I hope she wasn’t meant to be a brain surgeon. What have I done?”
但我知道,衰老效应最终会让人们不再阅读它,就像我儿子年轻时很难让他看黑白电影一样,无论它们有多好。
But I know that eventually the aging effect is going to keep people from reading it, for the same reason that it was so hard to get my son to watch black and white movies when he was young, no matter how good they were.
显然,是时候提供新的例子了。
Clearly, it’s time for new examples.
说计算机和互联网以及我们使用它们的方式最近发生了很大变化,这只是温和的说法。非常温和。
To say that computers and the Internet and the way we use them have changed a lot lately is putting it mildly. Very mildly.
景观发生了三个方面的变化:
The landscape has changed in three ways:
技术得到了一些类固醇的帮助。2000 年,我们在相对较大的屏幕上使用网络,配有鼠标或触摸板和键盘。当我们这样做的时候,我们通常是坐在桌子旁。
Technology got its hands on some steroids. In 2000, we were using the Web on relatively large screens, with a mouse or touchpad and a keyboard. And we were sitting down, often at a desk, when we did.
现在,我们使用随身携带的微型计算机,配有静态相机和摄像机、能够确切知道我们所在位置的神奇地图,以及我们内置了整个图书和音乐库。并且始终连接到互联网。哦,它们也是电话。
Now we use tiny computers that we carry around with us all the time, with still and video cameras, magical maps that know exactly where we are, and our entire libraries of books and music built in. And are always connected to the Internet. Oh, and they’re phones, too.
哎呀,我可以用我的“电话”
Heck, I can use my “phone” to
...几秒钟内预订餐厅
...book a restaurant reservation in seconds
...从任何地方调节我家的暖气
...adjust the heat in my house from anywhere
...或者无需前往 ATM 机存入支票
...or deposit a check without going to an ATM
它不是飞行汽车(想想看,我们已经承诺我们现在已经拥有了),但它相当令人印象深刻。
It’s no flying car (which, come to think of it, we were promised we’d have by now), but it’s pretty impressive.
网络本身不断改进。即使我使用台式计算机完成我一直在网络上做的所有事情(购买东西、制定旅行计划、与朋友联系、阅读新闻和结算酒吧赌注),我使用的网站也倾向于比他们的前辈更强大、更有用。
The Web itself kept improving. Even when I’m using my desktop computer to do all the things I’ve always done on the Web (buying stuff, making travel plans, connecting with friends, reading the news, and settling bar bets), the sites I use tend to be much more powerful and useful than their predecessors.
我们已经开始期待诸如自动建议和自动更正之类的功能,并且当我们无法在线支付停车罚单或更新驾驶执照时,我们会感到恼火。
We’ve come to expect things like autosuggest and autocorrect, and we’re annoyed when we can’t pay a parking ticket or renew a driver’s license online.
可用性成为主流。2000 年,没有多少人了解可用性的重要性。
Usability went mainstream. In 2000, not that many people understood the importance of usability.
现在,很大程度上要感谢史蒂夫·乔布斯(和乔纳森·艾维),几乎每个人都明白它的重要性,即使他们仍然不完全确定它是什么。但现在他们通常称之为用户体验设计(UXD 或 UX),这是任何有助于为用户提供更好体验的活动或职业的总称。
Now, thanks in large part to Steve Jobs (and Jonathan Ive), almost everyone understands that it’s important, even if they’re still not entirely sure what it is. Except now they usually call it User Experience Design (UXD or just UX), an umbrella term for any activity or profession that contributes to a better experience for the user.
很高兴现在越来越重视为用户设计,但是随着这种演变而出现的所有新的工作描述、子专业和工具让很多人对他们实际上应该做什么感到困惑。
It’s great that there’s now so much more emphasis on designing for the user, but all the new job descriptions, subspecialties, and tools that have come along with this evolution have left a lot of people confused about what they should actually do about it.
我将在整本书中讨论所有这三个变化。
I’ll be talking about all three of these changes throughout the book.
这个版本有新的例子,一些新的原则,以及我一路上学到的一些东西,但它仍然是同一本书,具有相同的目的:它仍然是一本关于设计伟大的、可用的网站的书。
This edition has new examples, some new principles, and a few things I’ve learned along the way, but it’s still the same book, with the same purpose: It’s still a book about designing great, usable Web sites.
它仍然是一本关于设计人们需要交互的任何东西的书,无论是微波炉、移动应用程序还是自动取款机。
And it’s also still a book about designing anything that people need to interact with, whether it’s a microwave oven, a mobile app, or an ATM.
即使情况发生了变化,基本原则也是一样的,因为可用性是关于人以及他们如何理解和使用事物的,而不是关于技术的。虽然技术往往变化很快,但人们的变化却非常缓慢。3
The basic principles are the same even if the landscape has changed, because usability is about people and how they understand and use things, not about technology. And while technology often changes quickly, people change very slowly.3
3 有一段精彩的挪威视频(带字幕)讲述了这一点,视频中一名僧侣在努力使用这本新奇的“书”时获得了帮助。(在 YouTube 上搜索“中世纪服务台”。)
3 There’s a wonderful Norwegian video (with subtitles) about this that shows a monk getting help as he struggles to use the newfangled “book.” (Search for “medieval helpdesk” on YouTube.)
或者正如雅各布·尼尔森(Jakob Nielsen)所说的那样:
Or as Jakob Nielsen so aptly put it:
人脑的容量一年到一年都不会改变,因此研究人类行为的见解具有很长的保质期。二十年前对用户来说困难的事情在今天仍然很困难。
The human brain’s capacity doesn’t change from one year to the next, so the insights from studying human behavior have a very long shelf life. What was difficult for users twenty years ago continues to be difficult today.
我希望您喜欢新版本。几年后,当你开着飞行汽车经过我时,别忘了向我挥手。
I hope you enjoy the new edition. And don’t forget to wave in a few years when you pass me in your flying car.
史蒂夫·克鲁格
2013 年 11 月
STEVE KRUG
NOVEMBER 2013
清嗓子和免责声明
THROAT CLEARING AND DISCLAIMERS
I can’t tell you anything you don’t already know. But I’d like to clarify a few things.
——乔·费拉拉,我的高中朋友
—JOE FERRARA, A HIGH SCHOOL FRIEND OF MINE
我有一份很棒的工作。我是一名可用性顾问。这就是我所做的:
I have a great job. I’m a usability consultant. Here’s what I do:
人们(“客户”)向我发送他们正在开发的东西。
People (“clients”) send me something they’re working on.
它可能是他们正在构建的新网站的设计,或者是他们正在重新设计的网站的 URL,或者是应用程序的原型。
It could be designs for a new Web site they’re building, or the URL of a site that they’re redesigning, or a prototype of an app.
我尝试使用他们发送给我的内容,做他们的用户需要或想要用它做的事情。我注意到人们可能会陷入困境的地方以及我认为会让他们感到困惑的事情(“专家可用性审查”)。
I try using what they send me, doing the things that their users would need or want to do with it. I note the places where people are likely to get stuck and the things that I think will confuse them (an “expert usability review”).
有时,我会让其他人尝试使用它,同时我观察他们在哪里遇到困难和困惑(“可用性测试”)。
Sometimes I get other people to try using it while I watch to see where they get stuck and confused (“usability testing”).
我与客户团队举行了一次会议,描述我发现的可能导致用户悲伤的问题(“可用性问题”),并帮助他们决定哪些问题最需要解决以及如何最好地解决这些问题。
I have a meeting with the client’s team to describe the problems I found that are likely to cause users grief (“usability issues”) and help them decide which ones are most important to fix and how best to fix them.
有时我们通过电话工作...
Sometimes we work by the phone...
...有时是亲自
...and sometimes in person
我曾经写过一份我所谓的“大报告”,详细描述了我的发现,但我最终意识到这不值得花时间和精力。现场演示可以让人们向我提问并表达他们的担忧——这是书面报告无法做到的。对于进行敏捷或精益开发的团队来说,无论如何也没有时间写书面报告。
I used to write what I called the “big honking report” detailing my findings, but I finally realized that it wasn’t worth the time and effort. A live presentation allows people to ask me questions and voice their concerns—something a written report doesn’t do. And for teams doing Agile or Lean development, there’s no time for written reports anyway.
他们付钱给我。
They pay me.
作为一名顾问,我可以和很多友善、聪明的人一起从事有趣的项目。我大部分时间都在家工作,不必每天参加令人头脑麻木的会议或处理办公室政治。我可以说出我的想法,人们通常会欣赏它。而且我的薪水很高。
Being a consultant, I get to work on interesting projects with a lot of nice, smart people. I get to work at home most of the time and I don’t have to sit in mind-numbing meetings every day or deal with office politics. I get to say what I think, and people usually appreciate it. And I get paid well.
最重要的是,我获得了很大的工作满意度,因为当我们完成时,他们正在构建的东西几乎总是比我们开始时要好得多。1
On top of all that, I get a lot of job satisfaction, because when we’re finished, the things they’re building are almost always much better than when we started.1
1几乎总是如此。即使人们知道可用性问题,他们也不能总是完全解决它们,正如我将在第 9 章中解释的那样。
1 Almost always. Even when people know about usability problems, they can’t always fix them completely, as I’ll explain in Chapter 9.
几乎每个开发团队都可以使用像我这样的人来帮助他们在产品中构建可用性。不幸的是,他们中的绝大多数人无力聘请可用性专家。
Almost every development team could use somebody like me to help them build usability into their products. Unfortunately, the vast majority of them can’t afford to hire a usability professional.
即使他们可以,也没有足够的资源可供使用。根据最新统计,全球有无数个网站(仅 iPhone 2就有数十亿个应用程序),而可用性顾问却只有大约 10,000 名。你算一下。
And even if they could, there aren’t enough to go around. At last count there were umpteen billion Web sites (and umpteen billion apps for the iPhone alone2) and only about 10,000 usability consultants worldwide. You do the math.
2 我不太清楚苹果为什么要吹嘘这一点。一个平台上拥有数以千计的优秀应用程序确实是一件好事。拥有数百万个平庸的应用程序意味着很难找到好的应用程序。
2 I’m not quite sure why Apple brags about this. Having thousands of good apps for a platform is a really good thing. Having millions of mediocre apps just means it’s really hard to find the good ones.
即使您的团队中确实有专业人士,该人也不可能查看团队生产的所有产品。
And even if you do have a professional on your team, that person can’t possibly look at everything the team produces.
在过去的几年里,让东西变得更可用几乎成为每个人的责任。视觉设计师和开发人员现在经常发现自己在做交互设计(决定当用户单击、敲击或滑动时接下来会发生什么)和信息架构(弄清楚一切应该如何组织)之类的事情。
In the last few years, making things more usable has become almost everybody’s responsibility. Visual designers and developers now often find themselves doing things like interaction design (deciding what happens next when the user clicks, taps, or swipes) and information architecture (figuring out how everything should be organized).
我写这本书主要是为了那些雇不起(或租用)像我这样的人的人。
I wrote this book mainly for people who can’t afford to hire (or rent) someone like me.
了解一些可用性原则将帮助您自己看到问题,并帮助您从一开始就避免制造问题。
Knowing some usability principles will help you see the problems yourself—and help keep you from creating them in the first place.
毫无疑问:如果你能负担得起,请雇用像我这样的人。但如果你做不到,我希望这本书能让你自己做(在你充足的业余时间)。
No question: If you can afford to, hire someone like me. But if you can’t, I hope this book will enable you to do it yourself (in your copious spare time).
幸运的是,我做的很多事情只是常识,任何有兴趣的人都可以学着做。
Fortunately, much of what I do is just common sense, and anyone with some interest can learn to do it.
然而,就像许多常识一样,在有人向您指出之前,它并不一定是显而易见的。3
Like a lot of common sense, though, it’s not necessarily obvious until after someone’s pointed it out to you.3
3 ...这就是我的咨询业务被称为“高级常识”的原因之一。“这不是火箭手术”是我的企业座右铭。
3 ...which is one reason why my consulting business is called Advanced Common Sense. “It’s not rocket surgery” is my corporate motto.
我花了很多时间告诉人们他们已经知道的事情,所以如果你发现自己在接下来的几页中经常想“我知道”,请不要感到惊讶。
I spend a lot of my time telling people things they already know, so don’t be surprised if you find yourself thinking “I knew that” a lot in the pages ahead.
© 2013。来自cartoonbank.com 的纽约客系列保留所有权利。
© 2013. The New Yorker Collection from cartoonbank.com All Rights Reserved.
更多好消息:我努力让这本书保持简短——希望足够短,以便你可以在长途飞机上阅读它。我这样做有两个原因:
More good news: I’ve worked hard to keep this book short—hopefully short enough so you can read it on a long plane ride. I did this for two reasons:
如果它很短,那么实际使用的可能性就更大。4我正在为那些奋战在第一线的人们——设计师、开发人员、网站制作人、项目经理、营销人员以及签署支票的人——以及那些单人乐队而写作。一切都是他们自己做的。
If it’s short, it’s more likely to actually be used.4 I’m writing for the people who are in the trenches—the designers, the developers, the site producers, the project managers, the marketing people, and the people who sign the checks—and for the one-man-bands who are doing it all themselves.
4 这里有一个很好的可用性原则:如果某件事需要投入大量时间(或者看起来需要投入时间),那么它就不太可能被使用。
4 There’s a good usability principle right there: If something requires a large investment of time—or looks like it will—it’s less likely to be used.
可用性不是你一生的工作,你也没有时间读一本长书。
Usability isn’t your life’s work, and you don’t have time for a long book.
你不需要知道一切。与任何领域一样,关于可用性,您可以学到很多东西。但除非您是可用性专业人士,否则对您有用的知识是有限的。5
You don’t need to know everything. As with any field, there’s a lot you could learn about usability. But unless you’re a usability professional, there’s a limit to how much is useful for you to learn.5
5 我一直很喜欢《血字的研究》中的一段话,华生博士惊讶地发现夏洛克·福尔摩斯不知道地球绕着太阳转。福尔摩斯解释说,考虑到人脑的容量有限,他不能承受无用的事实挤掉有用的事实的后果:
5 I’ve always liked the passage in A Study in Scarlet where Dr. Watson is shocked to learn that Sherlock Holmes doesn’t know that the earth travels around the sun. Given the finite capacity of the human brain, Holmes explains, he can’t afford to have useless facts elbowing out the useful ones:
“关我什么事?你说我们绕着太阳转。如果我们绕月飞行,对我或我的工作不会有任何影响。”
“What the deuce is it to me? You say that we go round the sun. If we went round the moon it would not make a pennyworth of difference to me or to my work.”
我发现我对每个项目做出的最有价值的贡献始终来自于牢记一些关键的可用性原则。我认为对于大多数人来说,理解这些原则比了解另一份具体该做和不该做的清单更有说服力。我试图总结一些我认为参与设计的每个人都应该了解的关于可用性的事情。
I find that the most valuable contributions I make to each project always come from keeping just a few key usability principles in mind. I think there’s a lot more leverage for most people in understanding these principles than in another laundry list of specific do’s and don’ts. I’ve tried to boil down the few things I think everybody involved in design should know about usability.
为了避免您浪费时间寻找它们,以下是您在本书中找不到的一些内容:
Just so you don’t waste your time looking for them, here are a few things you won’t find in this book:
严格而快速的可用性规则。我已经研究这个问题很长时间了,足够长的时间知道对于大多数可用性问题没有一个“正确”的答案。设计是一个复杂的过程,人们问我的大多数问题的真正答案是“这取决于情况”。但我确实认为,牢记一些有用的指导原则总是有帮助的,而这些正是我想要传达的内容。
Hard and fast usability rules. I’ve been at this for a long time, long enough to know that there is no one “right” answer to most usability questions. Design is a complicated process and the real answer to most of the questions people ask me is “It depends.” But I do think that there are a few useful guiding principles it always helps to have in mind, and those are what I’m trying to convey.
关于技术和网络未来的预测。老实说,你的猜测和我的一样好。我唯一确定的是(a)我听到的大多数预测几乎肯定是错误的,并且(b)最终证明重要的事情将会令人惊讶,即使事后看来它们会看起来非常明显。
Predictions about the future of technology and the Web. Honestly, your guess is as good as mine. The only thing I’m sure of is that (a) most of the predictions I hear are almost certainly wrong, and (b) the things that will turn out to be important will come as a surprise, even though in hindsight they’ll seem perfectly obvious.
诽谤设计不佳的网站和应用程序。如果你喜欢人们取笑那些有明显缺陷的事物,那你就读错书了。设计、构建和维护一个出色的网站或应用程序并不容易。这就像高尔夫:有几种方法可以让球进洞,有一百万种方法不能让球进洞。任何能答对一半的人都会令我钦佩。
Bad-mouthing of poorly designed sites and apps. If you enjoy people poking fun at things with obvious flaws, you’re reading the wrong book. Designing, building, and maintaining a great Web site or app isn’t easy. It’s like golf: a handful of ways to get the ball in the hole, a million ways not to. Anyone who gets it even half right has my admiration.
因此,您会发现我使用的示例往往来自带有小缺陷的优秀产品。我认为你可以从好的设计中学到比坏的设计更多的东西。
As a result, you’ll find that the examples I use tend to be from excellent products with minor flaws. I think you can learn more from looking at good designs than bad ones.
我在更新这本书时面临的一个困境是,它始终是一本关于设计可用网站的书。尽管这些原则适用于人们必须与之交互的任何事物的设计(包括选举选票和投票亭,甚至 PowerPoint 演示文稿),但其重点显然是 Web 设计,并且所有示例都来自网站。直到最近,这才是大多数人都在做的事情。
One of the dilemmas I faced when updating this book was that it’s always been a book about designing usable Web sites. Even though the principles apply to the design of anything people have to interact with (including things like election ballots and voting booths, and even PowerPoint presentations), its focus was clearly on Web design, and all the examples were from Web sites. Until recently, that’s what most people were working on.
但现在有很多人设计移动应用程序,甚至网站工作人员也必须创建在移动设备上运行良好的版本。我知道他们对所有这些如何适用于他们非常感兴趣。
But now there are a lot of people designing mobile apps, and even the people working on Web sites have to create versions of them that work well on mobile devices. I know they’re very interested in how all of this applies to them.
所以我做了三件事:
So I did three things:
包括任何有意义的移动示例
Included mobile examples wherever it made sense
添加了关于一些特定于移动设备的可用性问题的新章节
Added a new chapter about some mobile-specific usability issues
最重要的是:在封面副标题中添加了“and Mobile”
And the most important one: Added “and Mobile” to the subtitle on the cover
正如您将看到的,在一些让事情变得更清晰的地方,我没有写“网站”,而是写了“网站或移动应用程序”。不过,在大多数情况下,我使用以网络为中心的措辞来防止事情变得麻烦和分散注意力。
And as you’ll see, in some places where it made things clearer, instead of “Web site” I’ve written “Web site or mobile app.” In most cases, though, I used the Web-centric wording to keep things from getting cumbersome and distracting.
事实上,一件至关重要的事情是:我对可用性的定义。
One crucial thing, really: My definition of usability.
您会发现很多不同的可用性定义,通常将其分解为诸如
You’ll find a lot of different definitions of usability, often breaking it down into attributes like
有用:它能做人们需要做的事情吗?
Useful: Does it do something people need done?
可学习的:人们能弄清楚如何使用它吗?
Learnable: Can people figure out how to use it?
难忘:每次使用时都需要重新学习吗?
Memorable: Do they have to relearn it each time they use it?
有效:它能完成工作吗?
Effective: Does it get the job done?
高效:是否花费了合理的时间和精力?
Efficient: Does it do it with a reasonable amount of time and effort?
理想的:人们想要它吗?
Desirable: Do people want it?
甚至最近
and recently even
令人愉快:使用它是否令人愉快,甚至有趣?
Delightful: Is using it enjoyable, or even fun?
这些我稍后再谈。但对我来说,定义的重要部分非常简单。如果某个东西可用——无论是网站、遥控器还是旋转门——就意味着
I’ll talk about these later. But to me, the important part of the definition is pretty simple. If something is usable—whether it’s a Web site, a remote control, or a revolving door—it means that
一个具有平均水平(甚至低于平均水平)能力和经验的人可以弄清楚如何使用该东西来完成某件事,而不会带来比其价值更多的麻烦。
A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth.
相信我的话:就是这么简单。
Take my word for it: It’s really that simple.
我希望这本书能帮助你打造更好的产品——如果它能让你跳过一些关于设计的无休止的争论——甚至可能偶尔能及时回家吃晚饭。
I hope this book will help you build better products and—if it lets you skip a few of the endless arguments about design—maybe even get home in time for dinner once in a while.
克鲁格第一可用性定律
KRUG’S FIRST LAW OF USABILITY
Michael, why are the drapes open?
—— 《教父》第二部中的凯·柯里昂
—KAY CORLEONE IN THE GODFATHER, PART II
人们经常问我:
People often ask me:
“如果我想确保我的网站或应用程序易于使用,我应该做的最重要的事情是什么?”
“What’s the most important thing I should do if I want to make sure my site or app is easy to use?”
答案很简单。它不是“任何重要的事情都不应该超过两次点击”或“说用户的语言”或“保持一致”。
The answer is simple. It’s not “Nothing important should ever be more than two clicks away” or “Speak the user’s language” or “Be consistent.”
它是...
It’s...
从我记事起,我就一直告诉人们这是我的第一条可用性法则。
For as long I can remember, I’ve been telling people that this is my first law of usability.
这是最重要的原则——决定设计是否可行的最终决定因素。如果你脑子里只有一条可用性规则,那就把它定为一条。
It’s the overriding principle—the ultimate tie breaker when deciding whether a design works or it doesn’t. If you have room in your head for only one usability rule, make this the one.
例如,这意味着在人类可能的范围内,当我查看网页时,它应该是不言而喻的。明显的。不言自明。
For instance, it means that as far as is humanly possible, when I look at a Web page it should be self-evident. Obvious. Self-explanatory.
我应该能够“了解它”——它是什么以及如何使用它——而无需花费任何精力去思考它。
I should be able to “get it”—what it is and how to use it—without expending any effort thinking about it.
我们所说的到底有多不言而喻?
Just how self-evident are we talking about?
嗯,不言而喻,例如,您的隔壁邻居对您网站的主题不感兴趣,而且几乎不知道如何使用“后退”按钮,可能会看着您的主页并说:“哦,这是A _____。” (如果幸运的话,她会说,“哦,这是一个_____。太棒了!”但那是另一个话题了。)
Well, self-evident enough, for instance, that your next door neighbor, who has no interest in the subject of your site and who barely knows how to use the Back button, could look at your Home page and say, “Oh, it’s a _____.” (With any luck, she’ll say, “Oh, it’s a _____. Great!” But that’s another subject.)
当我看着一个无法让我思考的页面时,我脑海中所有的想法都会浮现出来,比如“好吧,那就是_____。那是_____。这就是我想要的东西。”
When I’m looking at a page that doesn’t make me think, all the thought balloons over my head say things like “OK, there’s the_____. And that’s a _____. And there’s the thing that I want.”
但当我看着一个让我思考的页面时,我头顶上的所有思想气球都带有问号。
But when I’m looking at a page that makes me think, all the thought balloons over my head have question marks in them.
当您创建网站时,您的工作就是消除问号。
When you’re creating a site, your job is to get rid of the question marks.
网页上的各种各样的东西都会让我们停下来进行不必要的思考。以名字为例。典型的罪魁祸首是可爱或聪明的名称、营销引起的名称、公司特定的名称和不熟悉的技术名称。
All kinds of things on a Web page can make us stop and think unnecessarily. Take names, for example. Typical culprits are cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names.
例如,假设一位朋友告诉我 XYZ 公司正在寻找与我完全符合资格的人,所以我前往他们的网站。当我扫描页面寻找可点击的内容时,他们为职位列表部分选择的名称会产生影响。
For instance, suppose a friend tells me that XYZ Corp is looking to hire someone with my exact qualifications, so I head off to their Web site. As I scan the page for something to click, the name they’ve chosen for their job listings section makes a difference.
请注意,这些事情总是处于“每个人都显而易见”和“真正晦涩难懂”之间的连续体,并且总是涉及到权衡。
Note that these things are always on a continuum somewhere between “Obvious to everybody” and “Truly obscure,” and there are always tradeoffs involved.
例如,“Jobs”对于 XYZ Corp 来说可能听起来太不尊严,或者他们可能因为一些复杂的内部政治或因为公司新闻通讯中一直这么称呼而被锁定在“Job-o-Rama”中。1我的主要观点是,权衡通常应该比我们想象的更倾向于“显而易见”的方向。
For instance, “Jobs” may sound too undignified for XYZ Corp, or they may be locked into “Job-o-Rama” because of some complicated internal politics or because that’s what it’s always been called in their company newsletter.1 My main point is that the tradeoffs should usually be skewed further in the direction of “Obvious” than we think.
1 每个可用性缺陷背后几乎总是有一个看似合理的理由,以及一个良好的(即使是误导性的)意图。
1 There’s almost always a plausible rationale—and a good, if misguided, intention—behind every usability flaw.
人们头脑中另一个不必要的问号来源是明显不可点击的链接和按钮。作为一名用户,我永远不必花一毫秒的时间思考事物是否可点击。
Another needless source of question marks over people’s heads is links and buttons that aren’t obviously clickable. As a user, I should never have to devote a millisecond of thought to whether things are clickable—or not.
你可能会想:“好吧,这真的没有那么重要。如果你点击或点击它但没有任何反应,那有什么大不了的呢?”
You may be thinking, “Well, it really doesn’t matter that much. If you click or tap it and nothing happens, what’s the big deal?”
关键是,每个问号都会增加我们的认知工作量,分散我们对手头任务的注意力。这些干扰可能很轻微,但它们会累积起来,尤其是当我们一直在做一些事情,比如决定点击什么时。
The point is that every question mark adds to our cognitive workload, distracting our attention from the task at hand. The distractions may be slight but they add up, especially if it’s something we do all the time like deciding what to click on.
一般来说,人们不喜欢为如何做事而困惑。当他们想要娱乐、消遣或挑战时,他们喜欢在自己的地方玩拼图,但当他们想知道干洗店什么时候关门时,他们就不喜欢玩。事实上,网站的创建者并没有足够关心让事情变得显而易见和简单,这可能会削弱我们对网站及其背后组织的信心。
And as a rule, people don’t like to puzzle over how to do things. They enjoy puzzles in their place—when they want to be entertained or diverted or challenged—but not when they’re trying to find out what time their dry cleaner closes. The fact that the people who built the site didn’t care enough to make things obvious—and easy—can erode our confidence in the site and the organization behind it.
Another example from a common task: booking a flight.
诚然,大部分“心理喋喋不休”都发生在不到一秒的时间内,但您可以看到这是一个非常嘈杂的过程,带有很多问号。然后最后出现了一个令人费解的错误。
Granted, most of this “mental chatter” takes place in a fraction of a second, but you can see that it’s a pretty noisy process, with a lot of question marks. And then there’s a puzzling error at the end.
另一个网站只接受我输入的内容并为我提供有意义的选择,因此很难出错。
Another site just takes what I type and gives me choices that make sense, so it’s hard to go wrong.
没有问号。没有精神上的喋喋不休。并且没有错误。
No question marks. No mental chatter. And no errors.
我可以列出许多用户不应该花时间思考的事情,例如
I could list dozens of things that users shouldn’t spend their time thinking about, like
我在哪里?
Where am I?
我应该从哪里开始?
Where should I begin?
他们把_____放在哪里了?
Where did they put _____?
此页面上最重要的内容是什么?
What are the most important things on this page?
他们为什么这么称呼它?
Why did they call it that?
这是广告还是网站的一部分?
Is that an ad or part of the site?
但您最不需要的就是将另一个清单添加到您的设计清单堆栈中。你能做的最重要的事情就是了解消除问号的基本原理。当您这样做时,您将开始注意到您使用的网站和应用程序中引起您思考的所有事物。最终你将学会在你正在构建的东西中识别并避免它们。
But the last thing you need is another checklist to add to your stack of design checklists. The most important thing you can do is to understand the basic principle of eliminating question marks. When you do, you’ll begin to notice all the things that make you think in the sites and apps you use. And eventually you’ll learn to recognize and avoid them in the things you’re building.
您的目标应该是每个页面或屏幕都是不言而喻的,这样普通用户2只需查看它就知道它是什么以及如何使用它。换句话说,他们无需思考就能“明白”。
Your goal should be for each page or screen to be self-evident, so that just by looking at it the average user2 will know what it is and how to use it. In other words, they’ll “get it” without having to think about it.
2 实际的普通用户保存在日内瓦国际标准局的密封保险库中。我们最终将讨论考虑“普通用户”的最佳方式。
2 The actual Average User is kept in a hermetically sealed vault at the International Bureau of Standards in Geneva. We’ll get around to talking about the best way to think about the “average user” eventually.
但有时,特别是当您正在做一些原创或开创性的事情或本质上很复杂的事情时,您必须满足于不言自明的。在一个不言自明的页面上,需要一点点思考才能“理解它”——但只是一点点。事物的外观(如大小、颜色和布局)、精心选择的名称以及少量精心制作的文本应该共同创造一种几乎毫不费力的理解感。
Sometimes, though, particularly if you’re doing something original or groundbreaking or something that’s inherently complicated, you have to settle for self-explanatory. On a self-explanatory page, it takes a little thought to “get it”—but only a little. The appearance of things (like size, color, and layout), their well-chosen names, and the small amounts of carefully crafted text should all work together to create a sense of nearly effortless understanding.
规则是这样的:如果你不能让某件事不言而喻,你至少需要让它不言自明。
Here’s the rule: If you can’t make something self-evident, you at least need to make it self-explanatory.
奇怪的是,这并不是人们通常引用的原因:
Oddly enough, not for the reason people usually cite:
确实,那里有很多竞争。尤其是在移动应用程序等领域,通常有许多现成的(并且同样有吸引力)替代品,而且更换马匹的成本通常可以忽略不计(99 美分甚至“免费”)。
It’s true that there’s a lot of competition out there. Especially in things like mobile apps, where there are often many readily available (and equally attractive) alternatives, and the cost of changing horses is usually negligible (99 cents or even “Free”).
But it’s not always true that people are fickle. For instance:
如果这是他们唯一的选择(例如,公司内部网,或银行的移动应用程序,或销售他们正在寻找的藤条的唯一网站),他们可能别无选择,只能坚持下去。
They may have no choice but to stick with it, if it’s their only option (e.g., a company intranet, or their bank’s mobile app, or the only site that sells the rattan they’re looking for).
你会惊讶地发现,有些人会在令他们沮丧的网站上坚持多久,常常责怪自己而不是网站。还有“这趟车我已经等了十分钟了,我还不如再坚持一会儿”的现象。
You’d be surprised at how long some people will tough it out on sites that frustrate them, often blaming themselves and not the site. There’s also the “I’ve waited ten minutes for this bus already, so I may as well hang in a little longer” phenomenon.
此外,谁又能说比赛会不会那么令人沮丧呢?
Besides, who’s to say that the competition will be any less frustrating?
让每个页面或屏幕变得不言而喻,就像商店里拥有良好的灯光一样:它只会让一切看起来更好。使用一个不会让我们思考不重要事情的网站会让人感觉毫不费力,而思考对我们来说不重要的事情往往会消耗我们的精力、热情和时间。
Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better. Using a site that doesn’t make us think about unimportant things feels effortless, whereas puzzling over things that don’t matter to us tends to sap our energy and enthusiasm—and time.
但是,正如您将在下一章中看到的那样,当我们检查我们如何真正使用网络时,不要让我思考这一点很重要的主要原因是,大多数人花在查看我们设计的页面上的时间远少于我们花在浏览我们设计的页面上的时间。愿意想象一下。
But as you’ll see in the next chapter when we examine how we really use the Web, the main reason why it’s important not to make me think is that most people are going to spend far less time looking at the pages we design than we’d like to imagine.
因此,如果网页要有效,它们必须一目了然地发挥其大部分魔力。做到这一点的最佳方法是创建不言而喻的页面,或者至少是不言自明的。
As a result, if Web pages are going to be effective, they have to work most of their magic at a glance. And the best way to do this is to create pages that are self-evident, or at least self-explanatory.
扫描、满意和糊涂
SCANNING, SATISFICING, AND MUDDLING THROUGH
为什么东西总是在你最后寻找的地方?因为当你找到它们时你就不再寻找了!
Why are things always in the last place you look for them? Because you stop looking when you find them!
——儿童谜语
—CHILDREN’S RIDDLE
在我观察人们使用网络的所有时间里,给我印象最深的是我们认为人们使用网站的方式与他们实际使用网站的方式之间的差异。
In all the time I’ve spent watching people use the Web, the thing that has struck me most is the difference between how we think people use Web sites and how they actually use them.
当我们创建网站时,我们表现得好像人们会仔细研究每个页面,阅读我们精心设计的所有文本,弄清楚我们如何组织内容,并在决定单击哪个链接之前权衡他们的选择。
When we’re creating sites, we act as though people are going to pore over each page, reading all of our carefully crafted text, figuring out how we’ve organized things, and weighing their options before deciding which link to click.
他们大多数时候实际上做的事情(如果我们幸运的话)是浏览每个新页面,扫描一些文本,然后单击第一个引起他们兴趣或隐约类似于他们正在寻找的内容的链接。页面上几乎总是有很大一部分他们甚至不看。
What they actually do most of the time (if we’re lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. There are almost always large parts of the page that they don’t even look at.
我们考虑的是“伟大的文献”(或至少是“产品手册”),而用户的现实更接近“以每小时 60 英里的速度驶过的广告牌”。
We’re thinking “great literature” (or at least “product brochure”), while the user’s reality is much closer to “billboard going by at 60 miles an hour.”
正如您可能想象的那样,它比这更复杂一点,这取决于页面的类型、用户想要做什么、她有多着急等等。但这种简单化的观点比我们大多数人的想象更接近现实。
As you might imagine, it’s a little more complicated than this, and it depends on the kind of page, what the user is trying to do, how much of a hurry she’s in, and so on. But this simplistic view is much closer to reality than most of us imagine.
当我们设计页面时,我们想象一个更理性、更细心的用户是有道理的。很自然地假设每个人都以与我们相同的方式使用网络,并且像其他人一样,我们倾向于认为我们自己的行为比实际情况更加有序和明智。
It makes sense that we picture a more rational, attentive user when we’re designing pages. It’s only natural to assume that everyone uses the Web the same way we do, and—like everyone else—we tend to think that our own behavior is much more orderly and sensible than it really is.
但是,如果您想设计有效的网页,则必须学会接受有关现实世界 Web 使用的三个事实。
If you want to design effective Web pages, though, you have to learn to live with three facts about real-world Web use.
关于网络使用的极少数有据可查的事实之一是,人们往往花很少的时间阅读大多数网页。相反,我们会扫描(或浏览)它们,寻找引起我们注意的单词或短语。
One of the very few well-documented facts about Web use is that people tend to spend very little time reading most Web pages. Instead, we scan (or skim) them, looking for words or phrases that catch our eye.
当然,例外的是包含新闻报道、报告或产品描述等文档的页面,人们会重新阅读这些文档,但即便如此,他们也经常在阅读和扫描之间交替。
The exception, of course, is pages that contain documents like news stories, reports, or product descriptions, where people will revert to reading—but even then, they’re often alternating between reading and scanning.
我们为什么要扫描?
Why do we scan?
我们通常都在执行任务。大多数网络使用都涉及尝试完成某件事,并且通常很快就能完成。结果,网络用户往往表现得像鲨鱼:他们必须不断移动,否则就会死亡。我们只是没有时间阅读不必要的内容。
We’re usually on a mission. Most Web use involves trying to get something done, and usually done quickly. As a result, Web users tend to act like sharks: They have to keep moving, or they’ll die. We just don’t have the time to read any more than necessary.
我们知道我们不需要阅读所有内容。在大多数页面上,我们实际上只对页面上的一小部分内容感兴趣。我们只是在寻找与我们的兴趣或手头的任务相匹配的部分,其余的都是无关紧要的。扫描是我们找到相关位的方式。
We know we don’t need to read everything. On most pages, we’re really only interested in a fraction of what’s on the page. We’re just looking for the bits that match our interests or the task at hand, and the rest of it is irrelevant. Scanning is how we find the relevant bits.
我们很擅长。这是一项基本技能:当你学会阅读时,你也就学会了扫描。我们一生都在浏览报纸、杂志和书籍,或者如果你还不到 25 岁,可能会浏览 reddit、Tumblr 或 Facebook,以找到我们感兴趣的部分,而且我们知道这是有效的。
We’re good at it. It’s a basic skill: When you learn to read, you also learn to scan. We’ve been scanning newspapers, magazines, and books—or if you’re under 25, probably reddit, Tumblr, or Facebook—all our lives to find the parts we’re interested in, and we know that it works.
其最终效果很像加里·拉尔森(Gary Larson)的经典动画片《遥远的彼方》(Far Side),讲述了我们对狗说的话和它们听到的内容之间的差异。在漫画中,这只狗(名叫金杰)似乎在专心地听主人严肃地教导她不要乱扔垃圾。但从狗的角度来看,他所说的只是“等等,姜,等等,姜,等等。”
The net effect is a lot like Gary Larson’s classic Far Side cartoon about the difference between what we say to dogs and what they hear. In the cartoon, the dog (named Ginger) appears to be listening intently as her owner gives her a serious talking-to about staying out of the garbage. But from the dog’s point of view, all he’s saying is “blah blah GINGER blah blah blah blah GINGER blah blah blah.”
当我们查看页面时,我们看到的内容取决于我们的想法,而且通常只是页面内容的一小部分。
What we see when we look at a page depends on what we have in mind, and it’s usually just a fraction of what’s there.
像 Ginger 一样,我们倾向于关注那些似乎与 (a) 手头的任务或 (b) 我们当前或持续的个人兴趣相匹配的单词和短语。当然,(c) 根植于我们神经系统的触发词,如“免费”、“销售”和“性”,以及我们自己的名字。
Like Ginger, we tend to focus on words and phrases that seem to match (a) the task at hand or (b) our current or ongoing personal interests. And of course, (c) the trigger words that are hardwired into our nervous systems, like “Free,” “Sale,” and “Sex,” and our own name.
当我们设计页面时,我们倾向于假设用户会浏览页面,考虑所有可用的选项,并选择最好的一个。
When we’re designing pages, we tend to assume that users will scan the page, consider all of the available options, and choose the best one.
但实际上,大多数时候我们不会选择最好的选项,而是选择第一个合理的选项,即所谓的“满意”策略。1一旦我们发现一个链接可能会指向我们正在寻找的内容,我们就很有可能会点击它。
In reality, though, most of the time we don’t choose the best option—we choose the first reasonable option, a strategy known as satisficing.1 As soon as we find a link that seems like it might lead to what we’re looking for, there’s a very good chance that we’ll click it.
1 经济学家赫伯特·西蒙 (Herbert Simon) 在《人类模型:社会与理性》 (Wiley,1957 年)中创造了该术语(满足与满足的交叉词) 。
1 Economist Herbert Simon coined the term (a cross between satisfying and sufficing) in Models of Man: Social and Rational (Wiley, 1957).
我多年来一直观察这种行为,但直到我读了加里·克莱因(Gary Klein)的书《权力的来源:人们如何做出决策》之后,我才真正清楚其意义。
I’d observed this behavior for years, but its significance wasn’t really clear to me until I read Gary Klein’s book Sources of Power: How People Make Decisions.
克莱因花了多年时间研究自然决策:消防员、飞行员、国际象棋大师和核电站操作员等人如何在时间压力、目标模糊、信息有限和条件变化的真实情况下做出高风险决策。
Klein spent many years studying naturalistic decision making: how people like firefighters, pilots, chessmasters, and nuclear power plant operators make high-stakes decisions in real situations with time pressure, vague goals, limited information, and changing conditions.
克莱因的观察员团队使用普遍接受的理性决策模型进行了他们的第一项研究(针对火灾现场的战地指挥官):面对问题,一个人收集信息,确定可能的解决方案,并选择最好的解决方案。他们首先假设,由于高风险和极端的时间压力,消防队长只能比较两个选项,他们认为这个假设是保守的。
Klein’s team of observers went into their first study (of field commanders at fire scenes) with the generally accepted model of rational decision making: Faced with a problem, a person gathers information, identifies the possible solutions, and chooses the best one. They started with the hypothesis that because of the high stakes and extreme time pressure, fire captains would be able to compare only two options, an assumption they thought was conservative.
事实证明,消防指挥官没有比较任何选项。他们采取了想到的第一个合理计划,并对可能出现的问题进行了快速的心理测试。如果他们没有找到任何东西,他们就有自己的行动计划。
As it turned out, the fire commanders didn’t compare any options. They took the first reasonable plan that came to mind and did a quick mental test for possible problems. If they didn’t find any, they had their plan of action.
So why don’t Web users look for the best choice?
我们通常都很匆忙。正如克莱因指出的那样,“优化很困难,而且需要很长时间。满意才更有效率。”
We’re usually in a hurry. And as Klein points out, “Optimizing is hard, and it takes a long time. Satisficing is more efficient.”
猜错不会受到太大的惩罚。与救火不同的是,在网站上猜测错误的惩罚通常只需单击一两次“后退”按钮,从而使满足成为一种有效的策略。(返回是 Web 浏览器中最常用的按钮。)
There’s not much of a penalty for guessing wrong. Unlike firefighting, the penalty for guessing wrong on a Web site is usually only a click or two of the Back button, making satisficing an effective strategy. (Back is the most-used button in Web browsers.)
权衡选择可能不会提高我们的机会。在设计不佳的网站上,努力做出最佳选择并没有真正的帮助。通常,您也可以按照您的第一个猜测进行操作,如果不起作用,则使用“后退”按钮。
Weighing options may not improve our chances. On poorly designed sites, putting effort into making the best choice doesn’t really help. You’re usually just as well off going with your first guess and using the Back button if it doesn’t work out.
猜谜更有趣。这比权衡选择的工作量要少,而且如果你猜对了,速度会更快。它还引入了机会的元素——遇到令人惊讶和美好的事物的愉快可能性。
Guessing is more fun. It’s less work than weighing options, and if you guess right, it’s faster. And it introduces an element of chance—the pleasant possibility of running into something surprising and good.
当然,这并不是说用户在点击之前从不权衡选项。这取决于他们的心态、他们的时间紧迫程度以及他们对网站的信心程度等因素。
Of course, this is not to say that users never weigh options before they click. It depends on things like their frame of mind, how pressed they are for time, and how much confidence they have in the site.
一旦您进行任何可用性测试(无论您是在测试网站、软件还是家用电器),就会发现的一件事是,人们一直在不了解其工作原理或完全不了解其工作原理的情况下使用它们。关于它们如何工作的错误想法。
One of the things that becomes obvious as soon as you do any usability testing—whether you’re testing Web sites, software, or household appliances—is the extent to which people use things all the time without understanding how they work, or with completely wrong-headed ideas about how they work.
面对任何种类的技术,很少有人花时间阅读说明。相反,我们奋力前行,蒙混过关,编造出我们自己的模糊可信的故事,讲述我们正在做的事情以及它为何有效。
Faced with any sort of technology, very few people take the time to read instructions. Instead, we forge ahead and muddle through, making up our own vaguely plausible stories about what we’re doing and why it works.
这常常让我想起《王子与乞丐》结尾的场景,真正的王子发现那个长得一模一样的乞丐在他不在的时候一直把英国国玺当作胡桃夹子。(这完全有道理——对他来说,封印就是一块又大又重的金属。)
It often reminds me of the scene at the end of The Prince and the Pauper where the real prince discovers that the look-alike pauper has been using the Great Seal of England as a nutcracker in his absence. (It makes perfect sense—to him, the seal is just this great big, heavy chunk of metal.)
王子与乞丐(经典画报)
The Prince and the Pauper (Classics Illustrated)
事实是,我们就是这样完成事情的。我见过很多人有效地使用软件、网站和消费产品,但其方式却与设计者的初衷完全不同。
And the fact is, we get things done that way. I’ve seen lots of people use software, Web sites, and consumer products effectively in ways that are nothing like what the designers intended.
以网络浏览器为例,它是互联网使用的重要组成部分。对于构建网站的人来说,它是一个用于查看网页的应用程序。但如果你问用户浏览器是什么,令人惊讶的是,很大一部分人会说“这是我用来搜索……查找东西的工具”或“这是搜索引擎”。自己尝试一下:询问一些家庭成员什么是网络浏览器。你可能会感到惊讶。
Take the Web browser, for instance—a crucial part of Internet use. To people who build Web sites, it’s an application that you use to view Web pages. But if you ask users what a browser is, a surprisingly large percentage will say something like “It’s what I use to search...to find things” or “It’s the search engine.” Try it yourself: ask some family members what a Web browser is. You may be surprised.
许多人广泛使用网络而不知道他们正在使用浏览器。他们知道的是,您在框中输入一些内容,然后内容就会出现。2但这对他们来说并不重要:他们正在应付并成功地使用这个东西。
Many people use the Web extensively without knowing that they’re using a browser. What they know is you type something in a box and stuff appears.2 But it doesn’t matter to them: They’re muddling through and using the thing successfully.
2 通常是一个旁边带有“Google”字样的框。很多人认为谷歌就是互联网。
2 Usually a box with the word “Google” next to it. A lot of people think Google is the Internet.
蒙混过关并不只限于初学者。即使是精通技术的用户对事物工作原理的理解也常常存在令人惊讶的差距。(即使是马克·扎克伯格和谢尔盖·布林在生活中也拥有一些可以应付自如的技术,我也不会感到惊讶。)
And muddling through is not limited to beginners. Even technically savvy users often have surprising gaps in their understanding of how things work. (I wouldn’t be surprised if even Mark Zuckerberg and Sergey Brin have some bits of technology in their lives that they use by muddling through.)
为什么会出现这种情况?
Why does this happen?
这对我们来说并不重要。对于我们大多数人来说,是否理解事物的工作原理并不重要,只要我们能够使用它们即可。不是因为缺乏智慧,而是因为缺乏关怀。这对我们来说并不重要。3
It’s not important to us. For most of us, it doesn’t matter to us whether we understand how things work, as long as we can use them. It’s not for lack of intelligence, but for lack of caring. It’s just not important to us.3
3 Web 开发人员通常很难理解(甚至相信)人们可能有这种感觉,因为他们自己通常对事物的工作原理非常感兴趣。
3 Web developers often have a particularly hard time understanding—or even believing—that people might feel this way, since they themselves are usually keenly interested in how things work.
如果我们找到有效的方法,我们就会坚持下去。一旦我们找到了可行的方法——无论效果有多糟糕——我们往往不会寻找更好的方法。如果我们偶然发现一种方法,我们会使用更好的方法,但我们很少寻找一种方法。
If we find something that works, we stick to it. Once we find something that works—no matter how badly—we tend not to look for a better way. We’ll use a better way if we stumble across one, but we seldom look for one.
观看设计师和开发人员观察他们的第一次可用性测试总是很有趣的。当他们第一次看到用户点击完全不合适的内容时,他们会感到惊讶。(例如,当用户忽略导航栏中一个又大又胖的“软件”按钮时,他会说:“好吧,我正在寻找软件,所以我想我会点击这里的“便宜的东西”,因为便宜总是好的。”)用户甚至可能最终找到了他想要的东西,但到那时观看的人不知道是否高兴。
It’s always interesting to watch designers and developers observe their first usability test. The first time they see a user click on something completely inappropriate, they’re surprised. (For instance, when the user ignores a nice big fat “Software” button in the navigation bar, saying something like, “Well, I’m looking for software, so I guess I’d click here on ‘Cheap Stuff’ because cheap is always good.”) The user may even find what he’s looking for eventually, but by then the people watching don’t know whether to be happy or not.
第二次发生这种情况时,他们大喊“只需点击‘软件’!” 第三次,你可以看到他们在想:“我们为什么还要费心呢?”
The second time it happens, they’re yelling “Just click on ‘Software’!” The third time, you can see them thinking: “Why are we even bothering?”
这是一个很好的问题:如果人们能够蒙混过关,那么他们是否“明白”真的很重要吗?答案是,这很重要,因为虽然有时得过且过可能会奏效,但它往往效率低下且容易出错。
And it’s a good question: If people manage to muddle through so much, does it really matter whether they “get it”? The answer is that it matters a great deal because while muddling through may work sometimes, it tends to be inefficient and error-prone.
另一方面,如果用户“明白”:
On the other hand, if users “get it”:
他们更有可能找到他们想要的东西,这对他们和你都有好处。
There’s a much better chance that they’ll find what they’re looking for, which is good for them and for you.
他们更有可能了解您网站所提供的全部内容,而不仅仅是他们偶然发现的部分。
There’s a better chance that they’ll understand the full range of what your site has to offer—not just the parts that they stumble across.
您更有机会将他们引导至您希望他们看到的网站部分。
You have a better chance of steering them to the parts of your site that you want them to see.
当他们使用您的网站时,他们会感觉更聪明、更有掌控力,这会让他们再次回来。你可以侥幸逃脱一个人们蒙混过关的网站,直到有人在街上建立一个让他们感觉很聪明的网站。
They’ll feel smarter and more in control when they’re using your site, which will bring them back. You can get away with a site that people muddle through only until someone builds one down the street that makes them feel smart.
现在您可能会想(考虑到您的受众以及他们如何使用网络的情况并不乐观),“我为什么不在当地的 7-11 便利店找一份工作呢?至少我的努力可能会受到赞赏。”
By now you may be thinking (given this less than rosy picture of your audience and how they use the Web), “Why don’t I just get a job at the local 7-Eleven? At least there my efforts might be appreciated.”
那么,女孩该做什么呢?
So, what’s a girl to do?
我认为答案很简单:如果您的受众会表现得像您在设计广告牌一样,那么就设计出色的广告牌。
I think the answer is simple: If your audience is going to act like you’re designing billboards, then design great billboards.
设计是为了浏览,而不是阅读
DESIGNING FOR SCANNING, NOT READING
如果你/不知道/谁的标志/这些是你不能/开车很远/缅甸剃须!
If you / Don’t know / Whose signs / These are You can’t have / Driven very far / Burma-Shave!
— 宣传剃须膏的路边广告牌序列,1935 年左右
—SEQUENCE OF ROADSIDE BILLBOARDS PROMOTING SHAVING CREAM, CIRCA 1935
面对用户快速浏览的事实,您可以采取一些重要的措施来确保他们尽可能多地看到并理解他们需要了解的内容以及您希望他们了解的内容:
Faced with the fact that your users are whizzing by, there are some important things you can do to make sure they see and understand as much of what they need to know—and of what you want them to know—as possible:
充分利用惯例
Take advantage of conventions
创建有效的视觉层次结构
Create effective visual hierarchies
将页面分成明确定义的区域
Break pages up into clearly defined areas
让可点击的内容一目了然
Make it obvious what’s clickable
消除干扰
Eliminate distractions
设置内容格式以支持扫描
Format content to support scanning
要让几乎所有事情都更容易快速掌握,最好的方法之一就是遵循现有的约定——广泛使用或标准化的设计模式。例如:
One of the best ways to make almost anything easier to grasp in a hurry is to follow the existing conventions—the widely used or standardized design patterns. For example:
停止标志。考虑到驾驶员在各种天气和照明条件下一眼就能看到并认出它们是多么重要,所以所有停车标志看起来都一样真是一件好事。(有些细节可能因国家/地区而异,但总体而言,它们在世界各地都非常一致。)
Stop signs. Given how crucial it is that drivers see and recognize them at a glance, at a distance, in all kinds of weather and lighting conditions, it’s a really good thing that all stop signs look the same. (Some of the specifics may vary from country to country, but overall they’re remarkably consistent around the world.)
该惯例包括独特的形状、“停止”一词、与大多数自然环境形成鲜明对比的高度可见的颜色,以及标准化的尺寸、高度和位置。
The convention includes a distinctive shape, the word for “Stop,” a highly visible color that contrasts with most natural surroundings, and standardized size, height, and location.
汽车中的控制装置。想象一下,如果油门踏板并不总是位于制动踏板的右侧,或者喇叭并不总是位于方向盘上,那么尝试驾驶租赁汽车。
Controls in cars. Imagine trying to drive a rental car if the gas pedal wasn’t always to the right of the brake pedal, or the horn wasn’t always on the steering wheel.
在过去的二十年中,网页的许多约定已经发展。作为用户,我们对它抱有很多期望
In the past twenty years, many conventions for Web pages have evolved. As users, we’ve come to have a lot of expectations about
内容在页面上的位置。例如,用户期望标识网站的徽标位于左上角(至少在从左到右阅读的国家/地区),并且主要导航位于左侧的顶部或下方。
Where things will be located on a page. For example, users expect the logo identifying the site to be in the top-left corner (at least in countries where reading is left-to-right) and the primary navigation to be across the top or down the left side.
如何工作。例如,几乎所有销售产品的网站都使用购物车的比喻和一系列非常相似的表格来指定您的付款方式、送货地址等内容。
How things work. For example, almost all sites that sell products use the metaphor of a shopping cart and a very similar series of forms for specifying things like your method of payment, your shipping address, and so on.
事情看起来怎么样。许多元素都有标准化的外观,例如告诉您这是视频链接的图标、搜索图标和社交网络共享选项。
How things look. Many elements have a standardized appearance, like the icon that tells you it’s a link to a video, the search icon, and the social networking sharing options.
不同类型的网站(商业、大学、博客、餐馆、电影等等)的惯例也发生了变化,因为每个类别中的所有网站都必须解决相同的问题。
Conventions have also evolved for different kinds of sites—commerce, colleges, blogs, restaurants, movies, and many more—since all the sites in each category have to solve the same set of problems.
SomeSlightlyIrregular.com
SomeSlightlyIrregular.com
cityislandmovie.com
cityislandmovie.com
这些惯例并不是凭空产生的:它们都是从某个人的好主意开始的。如果一个想法足够好,其他网站就会模仿它,最终有足够多的人在足够多的地方看到它,以至于不需要解释。
These conventions didn’t just come out of thin air: They all started life as somebody’s bright idea. If an idea works well enough, other sites imitate it and eventually enough people have seen it in enough places that it needs no explanation.
如果应用得当,Web 约定会让用户的生活变得更轻松,因为他们在从一个站点到另一个站点时不必不断地弄清楚事物是什么以及它们应该如何工作。
When applied well, Web conventions make life easier for users because they don’t have to constantly figure out what things are and how they’re supposed to work as they go from site to site.
想要证明惯例有帮助吗?看看您对此页面了解多少——即使您一个字也听不懂——只是因为它遵循一些约定。
Want proof that conventions help? See how much you know about this page—even if you can’t understand a word of it—just because it follows some conventions.
然而,惯例有一个问题:设计师往往不愿意利用它们。
One problem with conventions, though: Designers are often reluctant to take advantage of them.
面对遵循惯例的前景,设计师们很容易尝试重新发明轮子,这很大程度上是因为他们觉得(并非错误地)他们被雇用来做一些新的、不同的事情,而不是同样的旧事情。更不用说来自同行的赞扬、奖项和高调的工作机会很少基于“最佳利用惯例”等标准。
Faced with the prospect of following a convention, there’s a great temptation for designers to try reinventing the wheel instead, largely because they feel (not incorrectly) that they’ve been hired to do something new and different, not the same old thing. Not to mention the fact that praise from peers, awards, and high-profile job offers are rarely based on criteria like “best use of conventions.”
有时,花时间重新发明轮子会产生革命性的新型滚动装置。但通常这只是花在重新发明轮子上的时间。
Occasionally, time spent reinventing the wheel results in a revolutionary new rolling device. But usually it just amounts to time spent reinventing the wheel.
如果你要创新,你必须了解你要取代的东西的价值(或者正如迪伦所说,“要生活在法律之外,你必须诚实”),而且很容易低估价值的大小公约规定。典型的例子是自定义滚动条。每当设计师决定从头开始创建滚动条(通常是为了使它们更漂亮)时,结果几乎总是表明设计师从未考虑过标准操作系统滚动条的演变过程中花费了数百或数千小时的微调。
If you’re going to innovate, you have to understand the value of what you’re replacing (or as Dylan put it, “To live outside the law, you must be honest”), and it’s easy to underestimate just how much value conventions provide. The classic example is custom scrollbars. Whenever a designer decides to create scrollbars from scratch—usually to make them prettier—the results almost always make it obvious that the designer never thought about how many hundreds or thousands of hours of fine tuning went into the evolution of the standard operating system scrollbars.
如果您不打算使用现有的 Web 约定,则需要确保用 (a) 替换它的内容非常清晰且不言自明,因此没有学习曲线,因此它与约定一样好,或 (b) 增加了如此多的价值,值得一个小的学习曲线。
If you’re not going to use an existing Web convention, you need to be sure that what you’re replacing it with either (a) is so clear and self-explanatory that there’s no learning curve—so it’s as good as the convention, or (b) adds so much value that it’s worth a small learning curve.
我的建议:当你知道自己有更好的想法时就进行创新,而当你没有更好的想法时就利用惯例。
My recommendation: Innovate when you know you have a better idea, but take advantage of conventions when you don’t.
请不要误会我的意思:我并没有以任何方式试图抑制创造力。我喜欢创新和原创的网页设计。
Don’t get me wrong: I’m not in any way trying to discourage creativity. I love innovative and original Web design.
我最喜欢的例子之一是 Harlem.org。整个网站是围绕 Art Kane 1957 年 8 月在哈莱姆区一处褐砂石台阶上拍摄的 57 位爵士音乐家的著名照片而构建的。您可以使用照片来导航网站,而不是使用文本链接或菜单。
One of my favorite examples is Harlem.org. The whole site is built around Art Kane’s famous photo of 57 jazz musicians, taken on the steps of a brownstone in Harlem in August 1957. Instead of text links or menus, you use the photo to navigate the site.
它不仅创新、有趣,而且易于理解和使用。创作者很聪明,他们明白这种乐趣可能会在一段时间后消失,因此他们还添加了更传统的基于类别的导航。
Not only is it innovative and fun, but it’s easy to understand and use. And the creators were smart enough to understand that the fun might wear off after a while so they also included a more conventional category-based navigation.
您还可以按姓名、乐器或爵士乐风格浏览音乐家。
You can also browse the musicians by name, instrument, or jazz style.
经验法则是,您可以而且应该随心所欲地发挥创造力和创新性,并尽可能地增加审美吸引力,只要您确保它仍然可用。
The rule of thumb is that you can—and should—be as creative and innovative as you want, and add as much aesthetic appeal as you can, as long as you make sure it’s still usable.
最后,谈谈一致性。
And finally, a word about consistency.
你经常会听到一致性被认为是绝对好的。人们仅仅通过说“我们不能那样做”就赢得了很多设计争论。这将不一致。”
You often hear consistency cited as an absolute good. People win a lot of design arguments just by saying “We can’t do that. It wouldn’t be consistent.”
在您的网站或应用程序中争取一致性始终是一件好事。例如,如果您的导航总是在同一个地方,我就不必考虑它或浪费时间寻找它。但在某些情况下,如果你让它们稍微不一致的话,事情就会变得更清晰。
Consistency is always a good thing to strive for within your site or app. If your navigation is always in the same place, for instance, I don’t have to think about it or waste time looking for it. But there will be cases where things will be clearer if you make them slightly inconsistent.
这是要记住的规则:
Here’s the rule to keep in mind:
清晰度胜过一致性
CLARITY TRUMPS CONSISTENCY
如果你可以通过稍微不一致来使某件事变得更加清晰,那么选择有利于清晰度。
If you can make something significantly clearer by making it slightly inconsistent, choose in favor of clarity.
让页面易于快速掌握的另一个重要方法是确保页面上事物的外观(所有视觉线索)准确地描绘页面上事物之间的关系:哪些事物最重要,哪些事物最重要。事物是相似的,哪些事物是其他事物的一部分。换句话说,每个页面都应该有清晰的视觉层次结构。
Another important way to make pages easy to grasp in a hurry is to make sure that the appearance of the things on the page—all of the visual cues—accurately portray the relationships between the things on the page: which things are most important, which things are similar, and which things are part of other things. In other words, each page should have a clear visual hierarchy.
具有清晰视觉层次的页面具有三个特征:
Pages with a clear visual hierarchy have three traits:
越是重要的事情,就越是突出。最重要的元素要么更大、更大胆、采用独特的颜色、由更多的空白空间衬托,要么靠近页面顶部,或者以上的某种组合。
The more important something is, the more prominent it is. The most important elements are either larger, bolder, in a distinctive color, set off by more white space, or nearer the top of the page—or some combination of the above.
逻辑上相关的事物在视觉上也相关。例如,您可以通过将事物分组在标题下、以相同的视觉样式显示它们或将它们全部放在明确定义的区域中来显示事物的相似性。
Things that are related logically are related visually. For instance, you can show that things are similar by grouping them together under a heading, displaying them in the same visual style, or putting them all in a clearly defined area.
事物在视觉上“嵌套”以显示事物的一部分。例如,站点部分名称(“计算机书籍”)将出现在各个书籍的标题上方,反映这些书籍是该部分的一部分。每本书的标题又将涵盖构成该书描述的所有元素。
Things are “nested” visually to show what’s part of what. For instance, a site section name (“Computer Books”) would appear above the titles of the individual books, reflecting the fact that the books are part of the section. And each book title in turn would span all the elements that make up the description of that book.
视觉层次结构并不是什么新鲜事。例如,报纸的每个页面都使用突出、分组和嵌套的方式,在我们阅读单词之前为我们提供有关页面内容的有用信息。这张照片与这个故事相匹配,因为它们都被这个标题所覆盖。这个故事是最重要的,因为它有最大的标题并且在页面上处于显着位置。
There’s nothing new about visual hierarchies. Every newspaper page, for instance, uses prominence, grouping, and nesting to give us useful information about the contents of the page before we read a word. This picture goes with this story because they’re both spanned by this headline. This story is the most important because it has the biggest headline and a prominent position on the page.
我们每天都会解析视觉层次结构,但它发生得如此之快,以至于我们唯一一次模糊地意识到我们正在这样做是在我们做不到的时候——当视觉线索(或缺乏视觉线索)迫使我们这样做时去思考。
We all parse visual hierarchies every day, but it happens so quickly that the only time we’re even vaguely aware that we’re doing it is when we can’t do it—when the visual cues (or absence of them) force us to think.
良好的视觉层次结构可以为我们预处理页面,以我们几乎可以立即掌握的方式组织和优先处理页面内容,从而节省我们的工作量。
A good visual hierarchy saves us work by preprocessing the page for us, organizing and prioritizing its contents in a way that we can grasp almost instantly.
但是,当页面没有清晰的视觉层次结构时(例如,如果所有内容看起来都同样重要),我们就会降低扫描页面以显示单词和短语的速度,然后尝试形成我们自己对内容的理解。重要程度以及事物的组织方式。还有很多工作要做。
But when a page doesn’t have a clear visual hierarchy—if everything looks equally important, for instance—we’re reduced to the much slower process of scanning the page for revealing words and phrases and then trying to form our own sense of what’s important and how things are organized. It’s a lot more work.
解析一个视觉层次结构稍有缺陷的页面(例如,标题跨越了不属于其一部分的内容)就像阅读一个粗心构造的句子(“比尔把猫放在桌子上一分钟,因为它是有点摇晃”)。
Parsing a page with a visual hierarchy that’s even slightly flawed—where a heading spans things that aren’t part of it, for instance—is like reading a carelessly constructed sentence (“Bill put the cat on the table for a minute because it was a little wobbly”).
这种有缺陷的视觉层次结构表明该网站的所有主要部分都是计算机书籍子部分的一部分。
This flawed visual hierarchy suggests that all the major sections of the site are part of the Computer Books subsection.
将标题放在其所属的位置可以使关系更加清晰。
Putting the heading where it belongs makes the relationship clearer.
尽管我们通常可以弄清楚这句话的含义,但它仍然会暂时让我们困惑,并迫使我们在不应该思考的时候思考。
Even though we can usually figure out what the sentence is supposed to mean, it still throws us momentarily and forces us to think when we shouldn’t have to.
理想情况下,在任何精心设计的网页上,用户都可以玩旧电视游戏节目“ 25,000 美元金字塔”的变体。1环顾四周,他们应该能够指着页面的不同区域并说:“我可以在这个网站上做一些事情!” “今日头条新闻的链接!” “这家公司卖的产品!” “他们急于卖给我的东西!” “通过导航可以到达网站的其余部分!”
Ideally, on any well-designed Web page users can play a variation of the old TV game show $25,000 Pyramid.1 Glancing around, they should be able to point at the different areas of the page and say, “Things I can do on this site!” “Links to today’s top stories!” “Products this company sells!” “Things they’re eager to sell me!” “Navigation to get to the rest of the site!”
1 参赛者必须让他们的伙伴通过举例来猜测“水管工使用的东西”之类的类别(“扳手、切管机、拉不起来的裤子……”)。
1 Contestants had to get their partners to guess a category like “Things a plumber uses” by giving them examples (“a wrench, a pipe cutter, pants that won’t stay up...”).
将页面划分为明确定义的区域非常重要,因为它允许用户快速决定要关注页面的哪些区域以及可以安全地忽略哪些区域。网页扫描的眼动追踪研究表明,用户在第一眼看到页面时很快就能判断出页面的哪些部分可能包含有用信息,然后很少看其他部分——几乎就好像它们不存在一样。(横幅盲目性——用户完全忽略他们认为包含广告的区域的能力——只是极端情况。)
Dividing the page into clearly defined areas is important because it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore. Eye-tracking studies of Web page scanning suggest that users decide very quickly in their initial glances which parts of the page are likely to have useful information and then rarely look at the other parts—almost as though they weren’t there. (Banner blindness—the ability of users to completely ignore areas they think will contain ads—is just the extreme case.)
由于人们在网络上所做的大部分事情都是寻找下一个可点击的内容,因此让您能够轻松辨别可点击的内容非常重要。
Since a large part of what people are doing on the Web is looking for the next thing to click, it’s important to make it easy to tell what’s clickable.
当我们扫描页面时,我们正在寻找各种视觉线索来识别可点击的东西(或在触摸屏上“可点击”)——例如形状(按钮、选项卡等)、位置(在菜单栏中、例如)和格式(颜色和下划线)。2
As we scan a page, we’re looking for a variety of visual cues that identify things as clickable (or “tappable” on touch screens)—things like shape (buttons, tabs, etc.), location (in a menu bar, for instance), and formatting (color and underlining).2
2 人们还依赖这样一个事实:当您将 Web 浏览器指向链接时,Web 浏览器中的光标会从箭头变为手形,但这需要故意移动光标,这是一个相对较慢的过程。此外,它不适用于触摸屏,因为触摸屏没有光标。
2 People also rely on the fact that the cursor in a Web browser changes from an arrow to a hand when you point it at a link, but this requires deliberately moving the cursor around, a relatively slow process. Also, it doesn’t work on touch screens because they don’t have a cursor.
从事物的外观中寻找线索来告诉我们如何使用它们的过程不仅限于网页。正如 Don Norman 在他最近更新的可用性经典《日常事物的设计》中愉快地解释的那样,我们不断地解析我们的环境(如门把手)以寻找这些线索(以决定是拉还是推)。阅读。您再也不会以同样的方式看待门了。
This process of looking for clues in the appearance of things that tell us how to use them isn’t limited to Web pages. As Don Norman explains so enjoyably in his recently updated usability classic The Design of Everyday Things, we’re constantly parsing our environment (like the handles on doors) for these clues (to decide whether to pull or push). Read it. You’ll never look at doors the same way again.
自网络诞生以来,轻松识别页面上可点击的内容一直是一个问题。
Easily identifying what’s clickable on a page has waxed and waned as a problem since the beginning of the Web.
不过,正如您将在第 10 章中看到的那样,它目前正在成为移动设计中的一个问题。
It’s currently resurfacing as an issue in mobile design, though, as you’ll see in Chapter 10.
一般来说,如果您只为所有文本链接坚持使用一种颜色,或者确保它们的形状和位置将它们识别为可点击,那就没问题了。只是不要犯愚蠢的错误,例如对链接和不可点击的标题使用相同的颜色。
In general, you’ll be fine if you just stick to one color for all text links or make sure that their shape and location identify them as clickable. Just don’t make silly mistakes like using the same color for links and nonclickable headings.
易于掌握的页面的最大敌人之一是视觉噪音。
One of the great enemies of easy-to-grasp pages is visual noise.
用户对复杂性和干扰的容忍度各不相同;有些人对嘈杂的页面没有任何问题,但许多人觉得它们非常烦人。据了解,用户甚至会在屏幕上贴便利贴,以掩盖在阅读时分散注意力的动画。
Users have varying tolerances for complexity and distractions; some people have no problem with noisy pages, but many find them downright annoying. Users have even been known to put Post-its on their screen to cover up animation that’s distracting them while they’re trying to read.
实际上存在三种不同类型的噪音:
There are really three different kinds of noise:
喊叫。当页面上的所有内容都在吸引您的注意时,效果可能会令人难以抗拒:大量购买邀请!很多感叹号、不同的字体和鲜艳的颜色!自动幻灯片、动画、弹出窗口以及无穷无尽的新的引人注目的广告格式!
Shouting. When everything on the page is clamoring for your attention, the effect can be overwhelming: Lots of invitations to buy! Lots of exclamation points, different typefaces, and bright colors! Automated slideshows, animation, pop-ups, and the never-ending array of new attention-grabbing ad formats!
事实是,一切不可能都很重要。喊叫通常是由于未能就哪些元素真正最重要做出艰难的决定,然后创建一个视觉层次结构来首先引导用户找到这些元素而导致的。
The truth is, everything can’t be important. Shouting is usually the result of a failure to make tough decisions about which elements are really the most important and then create a visual hierarchy that guides users to them first.
混乱。有些页面看起来就像一个被洗劫一空的房间,东西散落各处。这是一个明确的信号,表明设计者不理解使用网格来对齐页面上的元素的重要性。
Disorganization. Some pages look like a room that’s been ransacked, with things strewn everywhere. This is a sure sign that the designer doesn’t understand the importance of using grids to align the elements on a page.
混乱。我们都见过页面(尤其是主页)包含太多内容。最终的效果与当您的电子邮件收件箱中充斥着诸如来自网站的时事通讯之类的内容时相同,这些网站已确定您与他们的一次接触就使您成为终生的朋友:很难找到并专注于您真正关心的消息。最终会出现工程师所说的低信噪比:大量噪声,信息不多,而且噪声掩盖了有用的信息。
Clutter. We’ve all seen pages—especially Home pages—that just have too much stuff. The net effect is the same as when your email inbox is flooded with things like newsletters from sites that have decided that your one contact with them has made you lifelong friends: It’s hard to find and focus on the messages you actually care about. You end up with what engineers call a low signal-to-noise ratio: Lots of noise, not much information, and the noise obscures the useful stuff.
当您编辑网页时,最好先假设所有内容都是视觉噪音(“在证明无罪之前假定有罪”方法),并删除任何没有真正贡献的内容。面对有限的时间和注意力,所有不属于解决方案的内容都必须去掉。
When you’re editing your Web pages, it’s probably a good idea to start with the assumption that everything is visual noise (the “presumed guilty until proven innocent” approach) and get rid of anything that’s not making a real contribution. In the face of limited time and attention, everything that’s not part of the solution must go.
用户在网页上花费的大部分时间(也许是大部分时间)都花在扫描文本以搜索某些内容上。
Much of the time—perhaps most of the time—that users spend on your Web pages is spent scanning the text in search of something.
文本的格式化方式可以让他们更轻松地进行很多工作。
The way your text is formatted can do a lot to make it easier for them.
您更愿意扫描哪一个?
Which one would you rather scan?
为了使您的页面易于扫描,您可以采取以下最重要的措施:
Here are the most important things you can do to make your pages scan-friendly:
使用大量的标题。精心编写、深思熟虑的标题散布在文本中,充当页面的非正式大纲或目录。它们会告诉您每个部分的内容,或者,如果它们不那么直白,它们会引起您的兴趣。无论哪种方式,它们都会帮助您决定阅读、浏览或跳过哪些部分。
Use plenty of headings. Well-written, thoughtful headings interspersed in the text act as an informal outline or table of contents for a page. They tell you what each section is about or, if they’re less literal, they intrigue you. Either way they help you decide which parts to read, scan, or skip.
一般来说,您会想要使用比您想象的更多的标题,并投入更多的时间来编写它们。
In general, you’ll want to use more headings than you’d think and put more time into writing them.
另外,请确保标题格式正确。关于标题样式,人们经常忽视的两个非常重要的事情:
Also, be sure to format headings correctly. Two very important things about the styling of headings that people often overlook:
如果您使用多个级别的标题,请确保它们之间有明显的、不容错过的视觉区别。您可以通过增大每个较高级别或在其上方留出更多空间来实现此目的。
If you’re using more than one level of heading, make sure there’s an obvious, impossible-to-miss visual distinction between them. You can do this by making each higher level larger or by leaving more space above it.
坏的
Bad
更好的
Better
更重要的是:不要让你的标题浮动。确保他们更接近他们介绍的部分而不是他们接下来的部分。这造成了巨大的差异。
Even more important: Don’t let your headings float. Make sure they’re closer to the section they introduce than to the section they follow. This makes a huge difference.
坏的
Bad
更好的
Better
保持段落简短。长段落让读者面临卡罗琳·贾勒特和金妮·雷迪什所说的“文字之墙”。它们令人望而生畏,让读者更难保持自己的位置,而且比一系列较短的段落更难浏览。
Keep paragraphs short. Long paragraphs confront the reader with what Caroline Jarrett and Ginny Redish call a “wall of words.” They’re daunting, they make it harder for readers to keep their place, and they’re harder to scan than a series of shorter paragraphs.
您可能被告知每个段落都必须有主题句、细节句和结论,但在线阅读则不同。即使是单句段落也可以。
You may have been taught that each paragraph has to have a topic sentence, detail sentences, and a conclusion, but reading online is different. Even single-sentence paragraphs are fine.
如果您检查一个长段落,您几乎总是会发现有一个合理的地方可以将其分成两部分。养成这样做的习惯。
If you examine a long paragraph, you’ll almost always find that there’s a reasonable place to break it in two. Get in the habit of doing it.
使用项目符号列表。可以这样想:几乎所有可以成为项目符号列表的东西都应该是。只需查看您的段落中是否有任何由逗号或分号分隔的项目系列,您就会找到可能的候选者。
Use bulleted lists. Think of it this way: Almost anything that can be a bulleted list probably should be. Just look at your paragraphs for any series of items separated by commas or semicolons and you’ll find likely candidates.
为了获得最佳的可读性,列表中的项目之间应该有少量的额外空间。
And for optimal readability, there should be a small amount of additional space between the items in the list.
坏的
Bad
更好的
Better
突出显示关键术语。许多页面扫描包括寻找关键词和短语。将最重要的内容在文本中首次出现的位置设置为粗体,以便更容易查找。(如果它们已经是文本链接,则显然不必这样做。)不过,不要突出显示太多内容,否则该技术将失去其有效性。
Highlight key terms. Much page scanning consists of looking for key words and phrases. Formatting the most important ones in bold where they first appear in the text makes them easier to find. (If they’re already text links, you obviously don’t have to.) Don’t highlight too many things, though, or the technique will lose its effectiveness.
如果您确实想了解如何使内容可扫描(或任何与一般屏幕写作相关的内容),请跑(不要步行)到连接互联网的设备并订购 Ginny Redish 的书 Letting Go of the Words。
If you really want to learn about making content scannable (or about anything related to writing for screens in general), run, do not walk, to an Internet-connected device and order Ginny Redish’s book Letting Go of the Words.
当您这样做时,请为您认识的任何撰写、编辑或与创建数字内容有关的人订购一份副本。他们最终会永远欠你的情。
And while you’re at it, order a copy for anyone you know who writes, edits, or has anything to do with creating digital content. They’ll end up eternally indebted to you.
为什么用户喜欢盲目的选择
WHY USERS LIKE MINDLESS CHOICES
我点击多少次并不重要,只要每次点击都是无意识的、明确的选择。
It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.
——克鲁格第二可用性定律
—KRUG’S SECOND LAW OF USABILITY
多年来,网页设计师和可用性专业人士花费了大量时间来争论您可以期望用户单击(或点击)多少次才能获得他们想要的东西,而不会感到太沮丧。有些网站甚至有设计规则,规定点击次数不应超过指定的次数(通常是三、四或五次)才能到达网站中的任何页面。
Web designers and usability professionals have spent a lot of time over the years debating how many times you can expect users to click (or tap) to get what they want without getting too frustrated. Some sites even have design rules stating that it should never take more than a specified number of clicks (usually three, four, or five) to get to any page in the site.
从表面上看,“到达任何地方的点击次数”似乎是一个有用的指标。但随着时间的推移,我开始认为,真正重要的不是我获得我想要的东西所需的点击次数(尽管有限制),而是每次点击的难度——所需的思考量和关于我是否做出正确选择的不确定性。
On the face of it, “number of clicks to get anywhere” seems like a useful metric. But over time I’ve come to think that what really counts is not the number of clicks it takes me to get to what I want (although there are limits), but rather how hard each click is—the amount of thought required and the amount of uncertainty about whether I’m making the right choice.
总的来说,我认为可以肯定地说,用户不介意大量点击,只要每次点击都是无痛的,并且他们持续相信自己走在正确的轨道上——遵循通常所说的“信息的气味”。 ” 1清晰明确地识别目标的链接会散发出强烈的气味,确保用户点击它们将使他们更接近“猎物”。不明确或措辞不当的链接不会。
In general, I think it’s safe to say that users don’t mind a lot of clicks as long as each click is painless and they have continued confidence that they’re on the right track—following what’s often called the “scent of information.”1 Links that clearly and unambiguously identify their target give off a strong scent that assures users that clicking them will bring them nearer to their “prey.” Ambiguous or poorly worded links do not.
1 该术语来自施乐帕洛阿尔托研究中心 (Xerox PARC) 的 Peter Pirolli 和 Stuart Card 的“信息搜寻”研究,他们将寻求信息的人(“信息食者”)与追随猎物气味的动物进行了类比。
1 This term comes from Peter Pirolli and Stuart Card’s “information foraging” research at Xerox PARC in which they drew parallels between people seeking information (“informavores”) and animals following the scent of their prey.
我认为经验法则可能是“三次无意识、明确的点击等于一次需要思考的点击”。2
I think the rule of thumb might be something like “three mindless, unambiguous clicks equal one click that requires thought.”2
2 当然,也有例外。例如,如果我必须重复深入浏览网站中的同一路径,或者页面需要很长时间才能加载,那么更少的点击次数的价值就会增加。
2 Of course, there are exceptions. For instance, if I’m going to have to drill down through the same path in a site repeatedly, or if the pages are going to take a long time to load, then the value of fewer clicks increases.
文字游戏“二十个问题”中经典的第一个问题——“动物、蔬菜还是矿物?”——是无意识选择的一个很好的例子。只要你接受这样一个前提,即任何非植物或动物的东西——包括钢琴、打油诗和芝士蛋糕等各种各样的东西——都属于“矿物质”,那么几乎不需要思考就可以正确回答这个问题。3
The classic first question in the word game Twenty Questions—“Animal, vegetable, or mineral?”—is a wonderful example of a mindless choice. As long as you accept the premise that anything that’s not a plant or an animal—including things as diverse as pianos, limericks, and cheesecake, for instance—falls under “mineral,” it requires almost no thought to answer the question correctly.3
3 如果您忘记了游戏,您可以在www.20q.net上玩一个很棒的版本。它由 Robin Burgener 创建,使用神经网络算法,玩的游戏很卑鄙。
3 In case you’ve forgotten the game, there’s an excellent version that you can play against at www.20q.net. Created by Robin Burgener, it uses a neural net algorithm and plays a mean game.
不幸的是,网络上的许多选择并不那么明确。
Unfortunately, many choices on the Web aren’t as clear.
例如,就在几年前,当我试图购买在家庭办公室中使用的产品或服务(例如打印机)时,大多数制造商的网站都要求我做出顶级选择像这样:
For example, as recently as a few years ago when I was trying to buy a product or service to use in my home office (like a printer, for instance), most of the manufacturers’ sites asked me to make a top-level choice like this:
哪一个是我?我必须考虑一下,即使当我做出选择时,我也不太确信这是正确的。事实上,当目标页面最终加载时,我要期待的更多的是思考自己是否走对了地方。
Which one was me? I had to think about it, and even when I made my choice I wasn’t very confident it was the right one. In fact, what I had to look forward to when the target page finally loaded was even more thinking to figure out whether I was in the right place.
当我站在两个标有“邮资邮件”和“计量邮件”标签的邮箱前,手里拿着一张商务回信卡时,我就有这种感觉。他们认为这是什么——盖章的还是计量的?如果我把它放到错误的盒子里会发生什么?
It was the feeling I get when I’m standing in front of two mailboxes labeled Stamped Mail and Metered Mail with a business reply card in my hand. What do they think it is—stamped or metered? And what happens if I drop it in the wrong box?
我正在尝试在线阅读一篇文章。我到达的页面为我提供了所有这些选项:
I’m trying to read an article online. The page I arrive at gives me all these options:
现在我必须扫描所有这些文本并确定我是订户但不是会员,还是会员,或者两者都不是。然后我必须找出我使用的帐号或密码,或者决定是否值得加入。
Now I’ve got to scan all this text and work out whether I’m a subscriber but not a member, or a member, or neither one. And then I’ll have to dig up the account number or the password that I used or decide whether it’s worth joining.
此时,我问自己的问题可能已经从“我该如何回答这个问题?”发生了变化。到“我对这篇文章到底有多感兴趣?”
At this point, the question I’m asking myself is probably changing from “How do I answer this question?” to “Just how interested am I in this article?”
《纽约时报》不会立即向您展示所有细节,从而使同类选择看起来更容易。进行初始选择(登录或查看订阅选项)会将您带到另一个屏幕,在该屏幕中您只能看到该选择的相关问题或信息。
The New York Times makes the same kind of choice seem much easier by not confronting you with all the details at once. Making an initial selection (to log in or to see your options for subscribing) takes you to another screen where you see only the relevant questions or information for that selection.
这种给用户带来困难选择和难以回答的问题的问题在表单中一直存在。Caroline Jarrett 在她的书《有效的表单:为可用性设计 Web 表单》中用了一整章的内容(“让问题易于回答”) 。
This problem of giving the user difficult choices and questions that are hard to answer happens all the time in forms. Caroline Jarrett has an entire chapter about it (“Making Questions Easy to Answer”) in her book Forms that Work: Designing Web Forms for Usability.
正如金妮·雷迪什(Ginny Redish)关于网络写作的书一样,任何从事表单工作的人都应该在办公桌上放一本旧的副本。
As with Ginny Redish’s book about writing for the Web, anyone who works on forms should have a well-worn copy sitting on their desk.
然而,生活是复杂的,有些选择确实并不简单。
Life is complicated, though, and some choices really aren’t simple.
当你无法避免给我一个艰难的选择时,你需要竭尽全力为我提供所需的指导,但仅此而已。
When you can’t avoid giving me a difficult choice, you need to go out of your way to give me as much guidance as I need—but no more.
该指南在以下情况下效果最佳
This guidance works best when it’s
简介:对我有帮助的最少信息量
Brief: The smallest amount of information that will help me
及时:放置得当我需要它时我就能准确地遇到它
Timely: Placed so I encounter it exactly when I need it
不可避免:以确保我会注意到它的方式进行格式化
Unavoidable: Formatted in a way that ensures that I’ll notice it
例如,表单字段旁边的提示“这是什么?” 链接,甚至工具提示。
Examples are tips adjacent to form fields, “What’s this?” links, and even tool tips.
我最喜欢的这种及时指导的例子是在伦敦的街角。
My favorite example of this kind of just-in-time guidance is found on street corners throughout London.
它很简短(“向右看”和一个指向右侧的箭头)、及时(您在需要提醒的那一刻就看到它)并且不可避免(当您走下路边时,您几乎总是向下看)。
It’s brief (“LOOK RIGHT” and an arrow pointing right), timely (you see it at the instant you need to be reminded), and unavoidable (you almost always glance down when you’re stepping off a curb).
我不得不认为它拯救了许多预计交通将从另一个方向而来的游客的生命。(我知道它救了我一次。)
I have to think it’s saved the lives of a lot of tourists who expect traffic to be coming from the other direction. (I know it saved mine once.)
无论您是否需要提供帮助,关键是我们在网络上始终面临选择,而无意识地做出这些选择是您可以做的使网站易于使用的最重要的事情之一。
Whether you need to offer some help or not, the point is that we face choices all the time on the Web and making those choices mindless is one of the most important things you can do to make a site easy to use.
不为网络写作的艺术
THE ART OF NOT WRITING FOR THE WEB
Get rid of half the words on each page, then get rid of half of what’s left.
——克鲁格的可用性第三定律
—KRUG’S THIRD LAW OF USABILITY
在我在大学学到的五六件事中,让我印象最久、受益最多的一件事是 EB White 在《风格的要素》中提出的第十七条规则:
Of the five or six things that I learned in college, the one that has stuck with me the longest—and benefited me the most—is E. B. White’s seventeenth rule in The Elements of Style:
17. 省略不必要的词语。
17. Omit needless words.
行文简洁有力。句子中不应包含不必要的单词,段落中不应包含不必要的句子,就像绘图不应包含不必要的线条、机器不应包含不必要的零件一样。1
Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.1
1 William Strunk, Jr. 和 EB White,《风格的要素》(Allyn 和 Bacon,1979 年)。
1 William Strunk, Jr., and E. B. White, The Elements of Style (Allyn and Bacon, 1979).
当我查看大多数网页时,我会惊讶地发现,我看到的大多数文字都只是占用空间,因为没有人会阅读它们。只要在那里,所有额外的单词都表明您可能实际上需要阅读它们才能了解正在发生的事情,这通常会使页面看起来比实际情况更令人畏惧。
When I look at most Web pages, I’m struck by the fact that most of the words I see are just taking up space, because no one is ever going to read them. And just by being there, all the extra words suggest that you may actually need to read them to understand what’s going on, which often makes pages seem more daunting than they actually are.
我的第三定律可能听起来有些过分,因为它本来就是这样的。删除一半的单词实际上是一个现实的目标;我发现我可以毫不费力地删除大多数网页上的一半文字,而不会丢失任何有价值的东西。但删除剩下的一半的想法只是我试图鼓励人们对此毫不留情的方式。
My Third Law probably sounds excessive, because it’s meant to. Removing half of the words is actually a realistic goal; I find I have no trouble getting rid of half the words on most Web pages without losing anything of value. But the idea of removing half of what’s left is just my way of trying to encourage people to be ruthless about it.
摆脱所有那些没有人会读的单词有几个有益的效果:
Getting rid of all those words that no one is going to read has several beneficial effects:
它降低了页面的噪音水平。
It reduces the noise level of the page.
它使有用的内容更加突出。
It makes the useful content more prominent.
它使页面更短,使用户无需滚动即可一目了然地看到每个页面的更多内容。
It makes the pages shorter, allowing users to see more of each page at a glance without scrolling.
我并不是建议 WebMD.com 上的文章或 NYTimes.com 上的故事应该比现在短。但某些类型的写作往往特别容易过度。
I’m not suggesting that the articles at WebMD.com or the stories on NYTimes.com should be shorter than they are. But certain kinds of writing tend to be particularly prone to excess.
当我们看到它时,我们都知道快乐的谈话:这是介绍性的文字,应该欢迎我们来到该网站,并告诉我们它有多棒,或者告诉我们我们将在刚刚进入的部分中看到什么。
We all know happy talk when we see it: It’s the introductory text that’s supposed to welcome us to the site and tell us how great it is or to tell us what we’re about to see in the section we’ve just entered.
如果你不确定某件事是否是愉快的谈话,有一个万无一失的测试:如果你在阅读时仔细聆听,你实际上可以听到脑后有一个微小的声音在说:“等等等等”巴拉巴拉……”
If you’re not sure whether something is happy talk, there’s one sure-fire test: If you listen very closely while you’re reading it, you can actually hear a tiny voice in the back of your head saying, “Blah blah blah blah blah....”
很多快乐的谈话都是你在写得很糟糕的小册子中看到的那种自我祝贺的促销文章。与好的宣传文案不同,它没有传达任何有用的信息,它的重点是说明我们有多伟大,而不是解释是什么让我们变得伟大。
A lot of happy talk is the kind of self-congratulatory promotional writing that you find in badly written brochures. Unlike good promotional copy, it conveys no useful information, and it focuses on saying how great we are, as opposed to explaining what makes us great.
尽管有时在主页上可以找到愉快的谈话——通常是在以“欢迎来到……”开头的段落中——但它最喜欢的栖息地是网站各部分的首页(“部分前面”)。由于这些页面通常只是该部分中页面的链接列表,没有自己的实际内容,因此很容易让它们充满愉快的谈话。不幸的是,其效果就好像图书出版商觉得有义务在目录页中添加一段文字:“这本书包含许多关于 _____、_____ 和 _____ 的有趣章节。我们希望您喜欢它们。”
Although happy talk is sometimes found on Home pages—usually in paragraphs that start with the words “Welcome to...”—its favored habitat is the front pages of the sections of a site (“section fronts”). Since these pages are often just a list of links to the pages in the section with no real content of their own, there’s a temptation to fill them with happy talk. Unfortunately, the effect is as if a book publisher felt obligated to add a paragraph to the table of contents page saying, “This book contains many interesting chapters about _____, _____, and _____. We hope you enjoy them.”
愉快的谈话就像闲聊——没有内容,基本上只是一种社交方式。但大多数网络用户没有时间闲聊;他们想开门见山。你可以而且应该尽可能消除愉快的谈话。
Happy talk is like small talk—content-free, basically just a way to be sociable. But most Web users don’t have time for small talk; they want to get right to the point. You can—and should—eliminate as much happy talk as possible.
不必要的词语的另一个主要来源是指令。关于说明,你需要了解的主要一点是,没有人会阅读它们——至少在反复尝试“蒙混过关”失败之后不会。即使如此,如果说明很冗长,用户找到所需信息的可能性也相当低。
Another major source of needless words is instructions. The main thing you need to know about instructions is that no one is going to read them—at least not until after repeated attempts at “muddling through” have failed. And even then, if the instructions are wordy, the odds of users finding the information they need are pretty low.
您的目标应该始终是通过使所有内容不言自明或尽可能接近来完全消除指令。当绝对需要指示时,请将其减少到最低限度。
Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible. When instructions are absolutely necessary, cut them back to the bare minimum.
例如,以下是我在现场调查开始时发现的说明:
For example, here are the instructions I found at the beginning of a site survey:
我认为一些积极的修剪会让它们更有用:
I think some aggressive pruning makes them much more useful:
在前几章中,我一直试图传达一些指导原则,我认为在构建网站时最好牢记这些原则。
In these first few chapters, I’ve been trying to convey some guiding principles that I think are good to have in mind when you’re building a Web site.
现在我们将进入两章,看看这些原则如何应用于网页设计中两个最大和最重要的挑战:导航和主页。
Now we’re heading into two chapters that look at how these principles apply to two of the biggest and most important challenges in Web design: navigation and the Home page.
您可能想打包午餐。它们是很长的章节。
You might want to pack a lunch. They’re very long chapters.
设计导航
DESIGNING NAVIGATION
你可能会发现自己| 在一个美丽的房子里| 和一个美丽的妻子你可能会问自己| 嗯... | 我怎么到这里了?!
And you may find yourself | in a beautiful house | with a beautiful wife And you may ask yourself | Well... | How did I get here?!
——说话的头像,“一生一次”
—TALKING HEADS, “ONCE IN A LIFETIME”
这是事实:
It’s a fact:
如果人们无法找到解决方法,他们就不会使用您的网站。
People won’t use your Web site if they can’t find their way around it.
您可以根据自己作为 Web 用户的经验了解这一点。如果您访问某个网站但无法找到您要查找的内容或无法弄清楚该网站的组织方式,那么您不太可能停留很长时间,也不会再回来。那么如何创建众所周知的“清晰、简单、一致”的导航呢?
You know this from your own experience as a Web user. If you go to a site and can’t find what you’re looking for or figure out how the site is organized, you’re not likely to stay long—or come back. So how do you create the proverbial “clear, simple, and consistent” navigation?
想象一下:这是星期六下午,您前往购物中心购买电锯。
Picture this: It’s Saturday afternoon and you’re headed for the mall to buy a chainsaw.
当你走进西尔斯百货公司的大门时,你会想:“嗯。他们把电锯放在哪里?” 一进门,你就开始看墙上高高的部门名称。(它们足够大,您可以从商店的各个角落阅读它们。)
As you walk through the door at Sears, you’re thinking, “Hmmm. Where do they keep chainsaws?” As soon as you’re inside, you start looking at the department names, high up on the walls. (They’re big enough that you can read them from all the way across the store.)
“嗯,”你想,“工具?还是草坪和花园?” 可能是其中之一,但您必须从某个地方开始,以便朝着工具的方向前进。
“Hmmm,” you think, “Tools? Or Lawn and Garden?” It could be either one, but you’ve got to start somewhere so you head in the direction of Tools.
当您到达工具部门时,您开始查看每条过道尽头的标志。
When you reach the Tools department, you start looking at the signs at the end of each aisle.
When you think you’ve got the right aisle, you start looking at the individual products.
如果结果证明您猜错了,您可以尝试另一条过道,或者您可以在草坪和花园部门倒退并重新开始。完成后,该过程将如下所示:
If it turns out you’ve guessed wrong, you try another aisle, or you may back up and start over again in the Lawn and Garden department. By the time you’re done, the process looks something like this:
基本上,您使用商店的导航系统(标志和标志所体现的组织层次结构)以及扫描装满产品的货架以找到您要寻找的东西的能力。
Basically, you use the store’s navigation systems (the signs and the organizing hierarchy that the signs embody) and your ability to scan shelves full of products to find what you’re looking for.
当然,实际过程要复杂一些。一方面,当你走进门时,你通常会花几微秒的时间做出一个关键决定:你是要自己寻找电锯还是要问别人它们在哪里?
Of course, the actual process is a little more complex. For one thing, as you walk in the door you usually devote a few microseconds to a crucial decision: Are you going to start by looking for chainsaws on your own or are you going to ask someone where they are?
这是一个基于许多变量的决定——你对商店的熟悉程度,你对他们明智地组织事情的能力的信任程度,你的匆忙程度,甚至你的社交能力。
It’s a decision based on a number of variables—how familiar you are with the store, how much you trust their ability to organize things sensibly, how much of a hurry you’re in, and even how sociable you are.
When we factor this decision in, the process looks something like this:
请注意,即使您开始自己寻找,如果事情没有成功,您很可能最终还是会向别人问路。
Note that even if you start looking on your own, if things don’t pan out there’s a good chance that eventually you’ll end up asking someone for directions anyway.
在许多方面,当您进入网站时都会经历相同的过程。
In many ways, you go through the same process when you enter a Web site.
你通常会试图找到一些东西。在“现实”世界中,它可能是急诊室或一瓶家庭装的番茄酱。在网络上,它可能是一副耳机,也可能是卡萨布兰卡的瑞克餐厅领班演员的名字。1
You’re usually trying to find something. In the “real” world it might be the emergency room or a family-size bottle of ketchup. On the Web, it might be a pair of headphones or the name of the actor in Casablanca who played the headwaiter at Rick’s.1
1 S.Z. “Cuddles” Sakall,1884 年出生于布达佩斯的尤金·萨卡尔 (Eugene Sakall)。具有讽刺意味的是,在里克咖啡馆中扮演仇恨纳粹居民的大多数角色演员实际上都是逃离纳粹后登陆好莱坞的著名欧洲舞台和银幕演员。
1 S. Z. “Cuddles” Sakall, born Eugene Sakall in Budapest in 1884. Ironically, most of the character actors who played the Nazi-hating denizens of Rick’s Café were actually famous European stage and screen actors who landed in Hollywood after fleeing the Nazis.
您决定是先询问还是先浏览。不同之处在于,在网站上没有人可以告诉您东西在哪里。在网络上,搜索相当于问路——在搜索框中输入您要查找的内容的描述,然后返回指向该内容可能所在位置的链接列表。
You decide whether to ask first or browse first. The difference is that on a Web site there’s no one standing around who can tell you where things are. The Web equivalent of asking directions is searching—typing a description of what you’re looking for in a search box and getting back a list of links to places where it might be.
有些人(雅各布尼尔森称他们为“搜索主导”用户)几乎总是在进入网站后立即寻找搜索框。(这些人可能是一进入商店就寻找最近的店员的人。)
Some people (Jakob Nielsen calls them “search-dominant” users) will almost always look for a search box as soon as they enter a site. (These may be the same people who look for the nearest clerk as soon as they enter a store.)
其他人(尼尔森的“链接主导”用户)几乎总是会首先浏览,只有当他们用完可能的链接来点击或当他们对网站感到足够沮丧时才进行搜索。
Other people (Nielsen’s “link-dominant” users) will almost always browse first, searching only when they’ve run out of likely links to click or when they have gotten sufficiently frustrated by the site.
对于其他人来说,是从浏览还是搜索开始的决定取决于他们当前的心态、他们的匆忙程度以及该网站是否具有良好的可浏览导航。
For everyone else, the decision whether to start by browsing or searching depends on their current frame of mind, how much of a hurry they’re in, and whether the site appears to have decent browsable navigation.
如果您选择浏览,您可以使用标志来引导您穿过层次结构。通常,您将在主页上四处查看网站主要部分的列表(例如商店的部门标志),然后单击看起来正确的部分。
If you choose to browse, you make your way through a hierarchy, using signs to guide you. Typically, you’ll look around on the Home page for a list of the site’s main sections (like the store’s department signs) and click on the one that seems right.
然后您将从小节列表中进行选择。
Then you’ll choose from the list of subsections.
运气好的话,再点击一两次后,您就会得到一份您正在寻找的东西的列表。
With any luck, after another click or two you’ll end up with a list of the kind of thing you’re looking for.
然后,您可以单击各个链接来详细检查它们,就像您将产品下架并阅读标签一样。
Then you can click on the individual links to examine them in detail, the same way you’d take products off the shelf and read the labels.
最终,如果你找不到你想要的东西,你就会离开。无论是在网站上还是在西尔斯百货公司都是如此。当你确信他们没有得到它或者当你太沮丧而无法继续寻找时,你就会离开。
Eventually, if you can’t find what you’re looking for, you’ll leave. This is as true on a Web site as it is at Sears. You’ll leave when you’re convinced they haven’t got it or when you’re just too frustrated to keep looking.
Here’s what the process looks like:
在网站上查找内容和在“现实”世界中查找内容有很多相似之处。当我们探索网络时,在某些方面甚至感觉我们正在物理空间中移动。想想我们用来描述这种体验的词语,比如“巡航”、“浏览”和“冲浪”。单击链接不会“加载”或“显示”另一个页面,而是“将您带到”一个页面。
Looking for things on a Web site and looking for them in the “real” world have a lot of similarities. When we’re exploring the Web, in some ways it even feels like we’re moving around in a physical space. Think of the words we use to describe the experience—like “cruising,” “browsing,” and “surfing.” And clicking a link doesn’t “load” or “display” another page—it “takes you to” a page.
但网络体验缺失了我们一生赖以协商空间的许多线索。考虑一下网络空间的这些奇怪现象:
But the Web experience is missing many of the cues we’ve relied on all our lives to negotiate spaces. Consider these oddities of Web space:
没有尺度感。即使我们广泛使用了一个网站,除非它是一个非常小的网站,否则我们往往对它有多大(50 个页面?1,000?17,000?)知之甚少。2据我们所知,可能存在我们从未探索过的巨大角落。将此与杂志、博物馆或百货商店进行比较,在这些地方您至少总是对所见/不可见的比例有一个粗略的了解。
No sense of scale. Even after we’ve used a Web site extensively, unless it’s a very small site we tend to have very little sense of how big it is (50 pages? 1,000? 17,000?).2 For all we know, there could be huge corners we’ve never explored. Compare this to a magazine, a museum, or a department store, where you always have at least a rough sense of the seen/unseen ratio.
2 即使是网站管理人员也常常不知道他们的网站到底有多大。
2 Even the people who manage Web sites often have very little idea how big their sites really are.
实际结果是,很难知道您是否在网站上看到了您感兴趣的所有内容,这意味着很难知道何时停止查看。3
The practical result is that it’s very hard to know whether you’ve seen everything of interest to you in a site, which means it’s hard to know when to stop looking.3
3 这就是为什么它对于我们已经单击的链接以不同颜色显示很有用的原因之一。它让我们对我们已经覆盖了多少领域有了一些小小的了解。
3 This is one reason why it’s useful for links that we’ve already clicked on to display in a different color. It gives us some small sense of how much ground we’ve covered.
没有方向感。在网站中,没有左和右,没有上和下。我们可能会谈论向上和向下移动,但我们指的是在层次结构中向上和向下移动,达到更一般或更具体的级别。
No sense of direction. In a Web site, there’s no left and right, no up and down. We may talk about moving up and down, but we mean up and down in the hierarchy—to a more general or more specific level.
没有位置感。在物理空间中,当我们四处走动时,我们会积累有关该空间的知识。我们对事物的位置有了一种感觉,并且可以走捷径到达它们。
No sense of location. In physical spaces, as we move around we accumulate knowledge about the space. We develop a sense of where things are and can take shortcuts to get to them.
我们第一次可能会按照指示牌找到电锯,但下一次我们可能会想,
We may get to the chainsaws the first time by following the signs, but the next time we’re just as likely to think,
“电锯?哦,是的,我记得它们在哪里:右后角,靠近冰箱。”
“Chainsaws? Oh, yeah, I remember where they were: right rear corner, near the refrigerators.”
And then head straight to them.
但在网络上,你的脚永远不会接触地面;你的脚永远不会接触地面。相反,您可以通过点击链接来进行操作。单击“电动工具”,您会突然传送到电动工具过道,无需穿越空间,也无需看沿途的任何东西。
But on the Web, your feet never touch the ground; instead, you make your way around by clicking on links. Click on “Power Tools” and you’re suddenly teleported to the Power Tools aisle with no traversal of space, no glancing at things along the way.
当我们想要返回网站上的某些内容时,我们必须记住它在概念层次结构中的位置并回溯我们的步骤,而不是依赖于它在哪里的物理感觉。
When we want to return to something on a Web site, instead of relying on a physical sense of where it is we have to remember where it is in the conceptual hierarchy and retrace our steps.
这就是书签(存储的个人快捷方式)如此重要以及“后退”按钮成为 Web 浏览器中最常用按钮的原因之一。
This is one reason why bookmarks—stored personal shortcuts—are so important, and why the Back button is the most used button in Web browsers.
它还解释了为什么主页的概念如此重要。相对而言,主页是固定的地方。当您访问网站时,主页就像北极星。能够单击主页给您一个新的开始。
It also explains why the concept of Home pages is so important. Home pages are—comparatively—fixed places. When you’re in a site, the Home page is like the North Star. Being able to click Home gives you a fresh start.
这种身体素质的缺乏既是好事也是坏事。从好的方面来说,失重感可能令人兴奋,并部分解释了为什么我们很容易在网络上忘记时间,就像我们“迷失”在一本好书中一样。
This lack of physicality is both good and bad. On the plus side, the sense of weightlessness can be exhilarating and partly explains why it’s so easy to lose track of time on the Web—the same as when we’re “lost” in a good book.
从消极的一面来看,我认为这解释了为什么我们使用“网络导航”这个术语,尽管我们从不谈论“百货商店导航”或“图书馆导航”。如果您在字典中查找导航,它会做两件事:从一个地方到达另一个地方,以及弄清楚您所在的位置。
On the negative side, I think it explains why we use the term “Web navigation” even though we never talk about “department store navigation” or “library navigation.” If you look up navigation in a dictionary, it’s about doing two things: getting from one place to another, and figuring out where you are.
我认为我们谈论网络导航是因为“弄清楚你在哪里”在网络上比在物理空间中是一个更普遍的问题。当我们上网时,我们本质上会迷失方向,而且我们无法透过过道来看看我们在哪里。网络导航通过体现网站的层次结构来弥补这种缺失的地方感,创造一种“在那里”的感觉。
I think we talk about Web navigation because “figuring out where you are” is a much more pervasive problem on the Web than in physical spaces. We’re inherently lost when we’re on the Web, and we can’t peek over the aisles to see where we are. Web navigation compensates for this missing sense of place by embodying the site’s hierarchy, creating a sense of “there.”
导航不仅仅是网站的一个功能;它也是网站的一个功能。它是网站,就像建筑物、货架和收银机是西尔斯一样。没有它,就没有那里。
Navigation isn’t just a feature of a Web site; it is the Web site, in the same way that the building, the shelves, and the cash registers are Sears. Without it, there’s no there there.
道德?网络导航最好要好。
The moral? Web navigation had better be good.
导航的两个目的是相当明显的:帮助我们找到我们正在寻找的东西并告诉我们我们在哪里。
Two of the purposes of navigation are fairly obvious: to help us find whatever it is we’re looking for and to tell us where we are.
但导航还有其他一些同样重要且容易被忽视的功能:
But navigation has some other equally important—and easily overlooked—functions:
它告诉我们这里有什么。通过使层次结构可见,导航可以告诉我们网站包含哪些内容。导航显示内容!揭示该地点可能比指导或定位我们更重要。
It tells us what’s here. By making the hierarchy visible, navigation tells us what the site contains. Navigation reveals content! And revealing the site may be even more important than guiding or situating us.
它告诉我们如何使用该网站。如果导航正在发挥作用,它会隐式地告诉您从哪里开始以及您的选择是什么。如果做得正确,它应该是您需要的所有说明。(这很好,因为大多数用户无论如何都会忽略任何其他说明。)
It tells us how to use the site. If the navigation is doing its job, it tells you implicitly where to begin and what your options are. Done correctly, it should be all the instructions you need. (Which is good, since most users will ignore any other instructions anyway.)
它让我们对建造它的人充满信心。每次我们访问网站时,我们都会在心里盘算:“这些人知道他们在做什么吗?” 这是我们决定是否退出和决定是否回来的主要因素之一。清晰、深思熟虑的导航是网站创造良好印象的最佳机会之一。
It gives us confidence in the people who built it. Every moment we’re in a Web site, we’re keeping a mental running tally: “Do these guys know what they’re doing?” It’s one of the main factors we use in deciding whether to bail out and deciding whether to ever come back. Clear, well-thought-out navigation is one of the best opportunities a site has to create a good impression.
城市和建筑物等物理空间(甚至书籍和杂志等信息空间)都有自己的导航系统,其惯例随着时间的推移而演变,如街道标志、页码和章节标题。这些约定(松散地)指定了导航元素的外观和位置,以便我们知道在需要时要查找什么以及在哪里查找。
Physical spaces like cities and buildings (and even information spaces like books and magazines) have their own navigation systems, with conventions that have evolved over time like street signs, page numbers, and chapter titles. The conventions specify (loosely) the appearance and location of the navigation elements so we know what to look for and where to look when we need them.
将它们放在标准位置可以让我们以最小的努力快速找到它们;标准化它们的外观可以很容易地将它们与其他东西区分开来。
Putting them in a standard place lets us locate them quickly, with a minimum of effort; standardizing their appearance makes it easy to distinguish them from everything else.
例如,我们期望在街角找到路标,我们期望通过向上(而不是向下)查找来找到它们,并且我们期望它们看起来像路标(水平的,而不是垂直的)。
For instance, we expect to find street signs at street corners, we expect to find them by looking up (not down), and we expect them to look like street signs (horizontal, not vertical).
我们还理所当然地认为建筑物的名称将位于其前门的上方或旁边。在杂货店,我们希望在每条过道的尽头都能找到标志。在杂志中,我们知道前几页的某处会有目录,每页页边距的某处有页码,而且它们看起来像目录和页码。
We also take it for granted that the name of a building will be above or next to its front door. In a grocery store, we expect to find signs near the ends of each aisle. In a magazine, we know there will be a table of contents somewhere in the first few pages and page numbers somewhere in the margin of each page—and that they’ll look like a table of contents and page numbers.
想象一下,当这些惯例之一被打破时(例如,当杂志不在广告页面上添加页码时),这是多么令人沮丧。
Think of how frustrating it is when one of these conventions is broken (when magazines don’t put page numbers on advertising pages, for instance).
尽管它们的外观可能有很大差异,但以下是 Web 的基本导航约定:
Although their appearance can vary significantly, these are the basic navigation conventions for the Web:
Web 设计人员使用术语“持久导航”(或“全局导航”)来描述出现在网站每个页面上的一组导航元素。
Web designers use the term persistent navigation (or global navigation) to describe the set of navigation elements that appear on every page of a site.
如果做得好,持久导航应该说——最好用平静、令人安慰的声音:
Done right, persistent navigation should say—preferably in a calm, comforting voice:
“导航就在这里。有些部分会根据你所在的位置而发生一些变化,但它永远都在这里,而且永远以同样的方式工作。”
“The navigation is over here. Some parts will change a little depending on where you are, but it will always be here, and it will always work the same way.”
只需让导航以一致的外观出现在每个页面的同一位置即可让您立即确认您仍在同一个网站中,这比您想象的更重要。并且在整个网站中保持相同意味着(希望)您只需弄清楚它是如何工作的一次。
Just having the navigation appear in the same place on every page with a consistent look gives you instant confirmation that you’re still in the same site—which is more important than you might think. And keeping it the same throughout the site means that (hopefully) you only have to figure out how it works once.
持久导航应包括您最需要随时掌握的四个元素:
Persistent navigation should include the four elements you most need to have on hand at all times:
We’ll look at each of them in a minute. But first...
我撒了谎。“到处跟着我”规则有一个例外:表格。
I lied. There is one exception to the “follow me everywhere” rule: forms.
在需要填写表单的页面上,持续的导航有时可能会造成不必要的干扰。例如,当我在电子商务网站上付款时,您实际上并不希望我做任何事情,只是完成填写表格。当我注册、订阅、提供反馈或检查个性化偏好时也是如此。
On pages where a form needs to be filled in, the persistent navigation can sometimes be an unnecessary distraction. For instance, when I’m paying for my purchases on an e-commerce site, you don’t really want me to do anything but finish filling in the forms. The same is true when I’m registering, subscribing, giving feedback, or checking off personalization preferences.
对于这些页面,拥有最小版本的持久导航非常有用,其中仅包含站点 ID、主页链接以及可能帮助我填写表单的任何实用程序。
For these pages, it’s useful to have a minimal version of the persistent navigation with just the Site ID, a link to Home, and any Utilities that might help me fill out the form.
站点 ID 或徽标就像网站的建筑物名称。在西尔斯,我真的只需要在进去的时候看到名字就可以了。一旦我进去了,我就知道在我离开之前我仍然在西尔斯。但在网络上——我的主要旅行方式是远程传送——我需要在每个页面上看到它。
The Site ID or logo is like the building name for a Web site. At Sears, I really only need to see the name on my way in; once I’m inside, I know I’m still in Sears until I leave. But on the Web—where my primary mode of travel is teleportation—I need to see it on every page.
就像我们期望在前门看到建筑物的名称一样,我们期望在页面顶部看到站点 ID,通常位于(或至少靠近)左上角。4
In the same way that we expect to see the name of a building over the front entrance, we expect to see the Site ID at the top of the page—usually in (or at least near) the upper left corner.4
4 ...针对从左到右阅读语言编写的网页。
4 ... on Web pages written for left-to-right reading languages.
为什么?因为站点 ID 代表整个站点,这意味着它是站点逻辑层次结构中的最高层。
Why? Because the Site ID represents the whole site, which means it’s the highest thing in the logical hierarchy of the site.
这个网站
This site
本网站的部分
Sections of this site
小节
Subsections
子小节等
Sub-subsections, etc.
这一页
This page
本页的区域
Areas of this page
此页面上的项目
Items on this page
有两种方法可以在页面的视觉层次结构中体现这种首要地位:要么使其成为页面上最突出的内容,要么使其成为其他所有内容的框架。
And there are two ways to get this primacy across in the visual hierarchy of the page: either make it the most prominent thing on the page, or make it frame everything else.
由于您不希望 ID 成为页面上最突出的元素(也许主页上除外),因此它的最佳位置(最不可能让我思考的位置)位于顶部,它框架整个页面的地方。
Since you don’t want the ID to be the most prominent element on the page (except, perhaps, on the Home page), the best place for it—the place that is least likely to make me think—is at the top, where it frames the entire page.
除了位于我们期望的位置之外,站点 ID 还需要看起来像站点 ID。这意味着它应该具有我们期望在品牌徽标或商店外的标志中看到的属性:独特的字体和从按钮到广告牌的任何尺寸都可以识别的图形。
And in addition to being where we would expect it to be, the Site ID also needs to look like a Site ID. This means it should have the attributes we would expect to see in a brand logo or the sign outside a store: a distinctive typeface and a graphic that’s recognizable at any size from a button to a billboard.
部分(有时称为主导航)是指向网站主要部分的链接:网站层次结构的顶层。
The Sections—sometimes called the primary navigation—are the links to the main sections of the site: the top level of the site’s hierarchy.
在某些设计中,持久导航还将包括显示辅助导航的空间:当前部分中的子部分列表。
In some designs the persistent navigation will also include space to display the secondary navigation: the list of subsections in the current section.
在其他情况下,指向部分名称或单击它会显示一个下拉菜单。在其他情况下,单击会将您带到该部分的首页,您可以在其中找到辅助导航。
In others, pointing at a section name or clicking on it reveals a dropdown menu. And in others, clicking takes you to the front page of the section, where you’ll find the secondary navigation.
实用程序是指向网站重要元素的链接,这些元素实际上并不是内容层次结构的一部分。
Utilities are the links to important elements of the site that aren’t really part of the content hierarchy.
这些内容可以帮助我使用该网站(例如登录/注册、帮助、站点地图或购物车)或提供有关其发布者的信息(例如关于我们和联系我们)。
These are things that either can help me use the site (like Sign in/Register, Help, a Site Map, or a Shopping Cart) or provide information about its publisher (like About Us and Contact Us).
就像商店中设施的标志一样,公用设施列表应该比部分稍微不那么显眼。
Like the signs for the facilities in a store, the Utilities list should be slightly less prominent than the Sections.
不同类型的站点的实用程序会有所不同。例如,对于公司或电子商务网站,它们可能包括以下任何内容:
Utilities will vary for different types of sites. For a corporate or e-commerce site, for example, they might include any of the following:
关于我们
About Us
档案
Archives
查看
Checkout
公司信息
Company Info
联系我们
Contact Us
客户服务
Customer Service
讨论区
Discussion Boards
下载
Downloads
目录
Directory
论坛
Forums
常见问题解答
FAQs
帮助
Help
家
Home
投资者关系
Investor Relations
如何购物
How to Shop
工作
Jobs
我的 _______
My _______
消息
News
订单跟踪
Order Tracking
新闻稿
Press Releases
隐私政策
Privacy Policy
登记
Register
搜索
Search
购物车
Shopping Cart
登入
Sign in
网站地图
Site Map
商店定位器
Store Locator
你的帐户
Your Account
通常,持久导航只能容纳四到五个实用程序——用户可能最常需要的实用程序。如果你试图挤得更多,他们往往会迷失在人群中。不常用的剩余内容属于页脚:每页底部的小文本链接。
As a rule, the persistent navigation can accommodate only four or five Utilities—the ones users are likely to need most often. If you try to squeeze in more than that, they tend to get lost in the crowd. The less frequently used leftovers belong in the footer: the small text links at the bottom of each page.
持久导航中最重要的项目之一是将我带到网站主页的按钮或链接。
One of the most crucial items in the persistent navigation is a button or link that takes me to the site’s Home page.
始终在视线范围内有一个“主页”按钮可以让我放心,无论我多么迷路,我总是可以重新开始,例如按“重置”按钮或使用“免费出狱”卡。
Having a Home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a Reset button or using a “Get out of Jail Free” card.
几乎所有 Web 用户都希望站点 ID 是一个可以带您进入主页的按钮。我认为将主页包含在网站的主要部分中也是一个好主意。
Almost all Web users expect the Site ID to be a button that can take you to the Home page. I think it’s also a good idea to include Home with the main sections of the site.
考虑到搜索的力量以及更喜欢搜索而不是浏览的人数,除非网站非常小并且组织得很好,否则每个页面都应该有一个搜索框或指向搜索页面的链接。除非没有什么理由搜索您的网站,否则它应该是一个搜索框。
Given the power of searching and the number of people who prefer searching to browsing, unless a site is very small and very well organized, every page should have either a search box or a link to a search page. And unless there’s very little reason to search your site, it should be a search box.
请记住,对于很大一部分用户来说,他们到达新站点时的第一个正式行为将是扫描页面以查找与以下三种模式之一匹配的内容:
Keep in mind that for a large percentage of users their first official act when they reach a new site will be to scan the page for something that matches one of these three patterns:
这是一个简单的公式:一个框、一个按钮,以及“搜索”一词或普遍认可的放大镜图标。不要让他们感到困难——坚持公式。特别要避免
It’s a simple formula: a box, a button, and either the word “Search” or the universally recognized magnifying glass icon. Don’t make it hard for them—stick to the formula. In particular, avoid
花哨的措辞。他们会寻找“搜索”一词,因此请使用“搜索”一词,而不是“查找”、“快速查找”、“快速搜索”或“关键字搜索”。(如果您使用“搜索”作为框的标签,请使用“执行”一词作为按钮名称。)
Fancy wording. They’ll be looking for the word “Search,” so use the word Search, not Find, Quick Find, Quick Search, or Keyword Search. (If you use “Search” as the label for the box, use the word “Go” as the button name.)
指示。如果你坚持这个公式,任何使用网络超过几天的人都会知道该怎么做。添加“输入关键字”就像在语音邮件消息中说“在嘟嘟声处留言”:曾经有一段时间这是必要的,但现在它只会让您听起来毫无头绪。
Instructions. If you stick to the formula, anyone who has used the Web for more than a few days will know what to do. Adding “Type a keyword” is like saying, “Leave a message at the beep” on your voice mail message: There was a time when it was necessary, but now it just makes you sound clueless.
选项。如果搜索范围(搜索的内容:网站、网站的一部分或整个网络)存在任何混淆的可能性,请务必将其拼写出来。
Options. If there is any possibility of confusion about the scope of the search (what’s being searched: the site, part of the site, or the whole Web), by all means spell it out.
但在给我限制范围的选项之前要仔细考虑(例如,仅搜索网站的当前部分)。并且还要注意提供有关如何指定要搜索的内容的选项(例如,按标题或按作者搜索,或按部件号或按产品名称搜索)。
But think very carefully before giving me options to limit the scope (to search just the current section of the site, for instance). And also be wary of providing options for how I specify what I’m searching for (search by title or by author, for instance, or search by part number or by product name).
我很少看到这样的情况:向持久搜索框添加选项的潜在回报值得让我弄清楚选项是什么以及我是否需要使用它们(即让我思考)的成本。
I seldom see a case where the potential payoff for adding options to the persistent search box is worth the cost of making me figure out what the options are and whether I need to use them (i.e., making me think).
如果您想让我选择范围搜索,请在有用时将其提供给我 - 当我到达搜索结果页面并发现搜索所有内容时出现太多命中,因此我需要限制范围。
If you want to give me the option to scope the search, give it to me when it’s useful—when I get to the search results page and discover that searching everything turned up far too many hits, so I need to limit the scope.
这种情况经常发生,我已经开始期待它了:当我以前没有合作过的设计师向我发送初步页面设计以便我可以检查可用性问题时,我几乎不可避免地会得到一个流程图,显示网站的四层深度......
It’s happened so often I’ve come to expect it: When designers I haven’t worked with before send me preliminary page designs so I can check for usability issues, I almost inevitably get a flowchart that shows a site four levels deep...
...以及主页和前两层的示例页面。
...and sample pages for the Home page and the top two levels.
家
Home
二级页面
Second-level page
小节页
Subsection page
我不停地翻页寻找更多,或者至少是他们潦草地写着“这里发生了一些魔法”的地方,但我什至都没有找到。我认为这是网页设计中最常见的问题之一(尤其是在较大的网站中):未能给予较低级别的导航与顶部相同的关注。在许多网站中,一旦您超过第二级,导航就会崩溃并变得特别。这个问题非常普遍,以至于实际上很难找到三级导航的好例子。
I keep flipping the pages looking for more, or at least for the place where they’ve scrawled “Some magic happens here,” but I never find even that. I think this is one of the most common problems in Web design (especially in larger sites): failing to give the lower-level navigation the same attention as the top. In so many sites, as soon as you get past the second level, the navigation breaks down and becomes ad hoc. The problem is so common that it’s actually hard to find good examples of third-level navigation.
为什么会出现这种情况?
Why does this happen?
我认为,部分原因是考虑到页面上的空间有限以及必须挤入的元素数量,良好的多级导航显然很难设计。
Partly, I think, because good multi-level navigation is just plain hard to design—given the limited amount of space on the page and the number of elements that have to be squeezed in.
部分原因是设计师通常甚至没有足够的时间来弄清楚前两个层次。
Partly because designers usually don’t even have enough time to figure out the first two levels.
部分原因是它看起来并不那么重要。(毕竟,它有多重要?它不是主要的。它甚至不是次要的。)并且有一种倾向认为,当人们深入了解该网站时,他们就会了解它是如何工作的。
Partly because it just doesn’t seem that important. (After all, how important can it be? It’s not primary. It’s not even secondary.) And there’s a tendency to think that by the time people get that far into the site, they’ll understand how it works.
然后还有获取较低级别页面的示例内容和层次结构示例的问题。即使设计师提出要求,他们也可能不会得到它们,因为负责内容的人通常也没有把事情想得那么远。
And then there’s the problem of getting sample content and hierarchy examples for lower-level pages. Even if designers ask, they probably won’t get them, because the people responsible for the content usually haven’t thought things through that far, either.
但现实情况是,用户在较低级别页面上花费的时间通常与在顶部页面上花费的时间一样多。除非您从一开始就制定了从上到下的导航,否则很难在以后将其嫁接并得出一致的东西。
But the reality is that users usually end up spending as much time on lower-level pages as they do at the top. And unless you’ve worked out top-to-bottom navigation from the beginning, it’s very hard to graft it on later and come up with something consistent.
道德?在开始争论配色方案之前,拥有显示网站所有潜在级别的导航的示例页面至关重要。
The moral? It’s vital to have sample pages that show the navigation for all the potential levels of the site before you start arguing about the color scheme.
如果您曾经在洛杉矶呆过一段时间,您就会明白这不仅仅是一句歌词——洛杉矶确实是一条很棒的高速公路。因为洛杉矶人认真对待驾驶,所以他们有我见过的最好的街道标志。在洛杉矶,
If you’ve ever spent time in Los Angeles, you understand that it’s not just a song lyric—L.A. really is a great big freeway. And because people in L.A. take driving seriously, they have the best street signs I’ve ever seen. In L.A.,
路牌很大。当您停在十字路口时,您可以阅读下一个十字路口的标志。
Street signs are big. When you’re stopped at an intersection, you can read the sign for the next cross street.
它们就在正确的位置——悬挂在您行驶的街道上方,因此您所要做的就是向上看一眼。
They’re in the right place—hanging over the street you’re driving on, so all you have to do is glance up.
现在,我承认我很喜欢这种待遇,因为我来自波士顿,在波士顿,如果你能在还有时间转弯的情况下读懂路牌,你会认为自己很幸运。
Now, I’ll admit I’m a sucker for this kind of treatment because I come from Boston, where you consider yourself lucky if you can manage to read the street sign while there’s still time to make the turn.
结果?当我在洛杉矶开车时,我会花更少的精力和注意力来处理我所在的位置,而更多地花在交通、谈话和聆听All Things Thoughd上。我喜欢在洛杉矶开车
The result? When I’m driving in L.A., I devote less energy and attention to dealing with where I am and more to traffic, conversation, and listening to All Things Considered. I love driving in L.A.
页面名称是网络的路标。就像路牌一样,当事情进展顺利时,我可能根本不会注意到页面名称。但是,一旦我开始意识到我可能没有朝着正确的方向前进,我就需要能够轻松地找到页面名称,以便我能够确定方向。
Page names are the street signs of the Web. Just as with street signs, when things are going well I may not notice page names at all. But as soon as I start to sense that I may not be headed in the right direction, I need to be able to spot the page name effortlessly so I can get my bearings.
There are four things you need to know about page names:
每个页面都需要一个名称。正如每个角落都应该有路标一样,每一页都应该有一个名称。
Every page needs a name. Just as every corner should have a street sign, every page should have a name.
设计师有时会想,“好吧,我们在导航中突出显示了页面名称。这样就够了。” 这是一个很诱人的想法,因为它可以节省空间,而且页面布局中可以少一个元素,但这还不够。您还需要一个页面名称。
Designers sometimes think, “Well, we’ve highlighted the page name in the navigation. That’s good enough.” It’s a tempting idea because it can save space, and it’s one less element to work into the page layout, but it’s not enough. You need a page name, too.
该名称需要位于正确的位置。在页面的视觉层次结构中,页面名称应该显示出该页面独有的内容框架。(毕竟,这就是它的名字——不是导航或广告,它们只是基础设施。)
The name needs to be in the right place. In the visual hierarchy of the page, the page name should appear to be framing the content that is unique to this page. (After all, that’s what it’s naming—not the navigation or the ads, which are just the infrastructure.)
名字一定要醒目。您希望位置、大小、颜色和字体的组合使名称显示“这是整个页面的标题”。在大多数情况下,它将是页面上最大的文本。
The name needs to be prominent. You want the combination of position, size, color, and typeface to make the name say “This is the heading for the entire page.” In most cases, it will be the largest text on the page.
该名称需要与我单击的名称相匹配。尽管没有人提及,但每个网站都与其访问者签订了隐含的社会契约:
The name needs to match what I clicked. Even though nobody ever mentions it, every site makes an implicit social contract with its visitors:
该页面的名称将与我点击到达该页面的单词相匹配。
The name of the page will match the words I clicked to get there.
换句话说,如果我点击“热土豆泥”的链接或按钮,该网站会将我带到名为“热土豆泥”的页面。
In other words, if I click on a link or button that says “Hot mashed potatoes,” the site will take me to a page named “Hot mashed potatoes.”
这看似微不足道,但实际上是一个至关重要的协议。每当一个网站违反它时,我就被迫思考,即使只有几毫秒,“为什么这两件事不同?” 如果链接名称和页面名称之间存在重大差异或存在许多细微差异,我对该网站以及发布该网站的人员的能力的信任将会减弱。
It may seem trivial, but it’s actually a crucial agreement. Each time a site violates it, I’m forced to think, even if only for milliseconds, “Why are those two things different?” And if there’s a major discrepancy between the link name and the page name or a lot of minor discrepancies, my trust in the site—and the competence of the people who publish it—will be diminished.
当然,有时你必须妥协,通常是因为空间限制。如果我点击的单词和页面名称不完全匹配,重要的是(a)它们尽可能匹配,并且(b)差异的原因很明显。例如,如果我单击标有“给他的礼物”和“给她的礼物”的按钮,并获得标题为“给男士的礼物”和“给女士的礼物”的页面,即使措辞并不相同,但它们感觉很相似,以至于我'我不会考虑其中的区别。
Of course, sometimes you have to compromise, usually because of space limitations. If the words I click on and the page name don’t match exactly, the important thing is that (a) they match as closely as possible, and (b) the reason for the difference is obvious. For instance, if I click buttons labeled “Gifts for Him” and “Gifts for Her” and get pages titled “Gifts for Men” and “Gifts for Women,” even though the wording isn’t identical they feel so equivalent that I’m not going to think about the difference.
导航可以抵消网络固有的“迷失在太空中”的感觉的方法之一是向我显示我在事物方案中的位置,就像购物中心地图上的“您在这里”指示器一样,或者一个国家公园。
One of the ways navigation can counteract the Web’s inherent “lost in space” feeling is by showing me where I am in the scheme of things, the same way that a “You are here” indicator does on the map in a shopping mall—or a National Park.
©2000。来自cartoonbank.com 的《纽约客》系列。版权所有。
©2000. The New Yorker Collection from cartoonbank.com. All Rights Reserved.
在网络上,这是通过在页面上显示的任何导航栏、列表或菜单中突出显示我的当前位置来实现的。
On the Web, this is accomplished by highlighting my current location in whatever navigation bars, lists, or menus appear on the page.
在此示例中,当前部分(卧室)和小部分(照明)均已被“标记”。
In this example, the current section (Bedroom) and subsection (Lighting) have both been “marked.”
There are a number of ways to make the current location stand out:
“你在这里”指标最常见的缺点是它们太微妙了。他们需要脱颖而出;如果不这样做,它们就会失去作为视觉提示的价值,最终只会给页面添加更多噪音。确保它们脱颖而出的一种方法是应用多种视觉区别,例如不同的颜色和粗体文本。
The most common failing of “You are here” indicators is that they’re too subtle. They need to stand out; if they don’t, they lose their value as visual cues and end up just adding more noise to the page. One way to ensure that they stand out is to apply more than one visual distinction—for instance, a different color and bold text.
过于微妙的视觉线索实际上是一个非常常见的问题。设计师喜欢微妙的线索,因为微妙是复杂设计的特征之一。但网络用户通常都很匆忙,以至于他们经常会错过微妙的线索。
Too-subtle visual cues are actually a very common problem. Designers love subtle cues, because subtlety is one of the traits of sophisticated design. But Web users are generally in such a hurry that they routinely miss subtle cues.
一般来说,如果您是一名设计师,并且您认为视觉提示像拇指酸痛一样突出,那么这可能意味着您需要使其更加突出。
In general, if you’re a designer and you think a visual cue is sticking out like a sore thumb, it probably means you need to make it twice as prominent.
就像“您在这里”指示器一样,面包屑导航会向您显示您所在的位置。
Like “You are here” indicators, Breadcrumbs show you where you are.
它们被称为“面包屑”,因为它们让人想起汉塞尔在树林里撒下的面包屑痕迹,这样他和格蕾特就能找到回家的路。5
They’re called Breadcrumbs because they’re reminiscent of the trail of crumbs Hansel dropped in the woods so he and Gretel could find their way back home.5
5 在原著故事中,H & G 的继母说服父亲在经济困难时把他们丢到森林里,这样全家人就不会挨饿。多疑且足智多谋的 H 在进来的路上扔下鹅卵石并尾随他们回家,破坏了剧情。但下一次(!)H 被迫使用面包屑来代替,事实证明这是一个不太合适的替代品,因为鸟类在 H 和 G 回溯之前就吃掉了面包屑。最终这个故事演变成企图吃人、大盗窃和自焚,但基本上这是一个关于迷路是多么不愉快的故事。
5 In the original story, H & G’s stepmother persuades their father to lose them in the forest during lean times so the whole family won’t have to starve. The suspicious and resourceful H spoils the plot by dropping pebbles on the way in and following them home. But the next time (!) H is forced to use breadcrumbs instead, which prove to be a less-than-suitable substitute since birds eat them before H & G can retrace their steps. Eventually the tale devolves into attempted cannibalism, grand larceny, and immolation, but basically it’s a story about how unpleasant it is to be lost.
面包屑向您显示从主页到您所在位置的路径,并使您可以轻松地返回到站点层次结构中的更高级别。
Breadcrumbs show you the path from the Home page to where you are and make it easy to move back up to higher levels in the hierarchy of a site.
很长一段时间以来,面包屑都是一种奇怪的东西,只出现在那些实际上只是具有非常深的层次结构的巨大数据库的网站中。但如今,它们出现在越来越多的网站中,有时甚至取代了经过深思熟虑的导航。
For a long time, Breadcrumbs were an oddity, found only in sites that were really just enormous databases with very deep hierarchies. But these days they show up in more and more sites, sometimes in lieu of well-thought-out navigation.
如果做得好,面包屑是不言自明的,它们不占用太多空间,并且它们提供了一种方便、一致的方式来完成您最常需要做的两件事:备份关卡或返回主页。它们在具有深层层次结构的大型站点中最有用。
Done right, Breadcrumbs are self-explanatory, they don’t take up much room, and they provide a convenient, consistent way to do two of the things you need to do most often: back up a level or go Home. They’re most useful in a large site with a deep hierarchy.
以下是实施它们的一些最佳实践:
Here are a few best practices for implementing them:
将它们放在顶部。如果面包屑位于页面顶部,那么它们似乎效果最好。我认为这可能是因为它实际上使它们边缘化——使它们看起来像一个附件,就像书籍或杂志中的页码一样。
Put them at the top. Breadcrumbs seem to work best if they’re at the top of the page. I think this is probably because it literally marginalizes them—making them seem like an accessory, like page numbers in a book or magazine.
在级别之间使用 >。反复试验似乎表明,级别之间的最佳分隔符是“大于”字符 (>),可能是因为它在视觉上表明在级别之间向前移动。
Use > between levels. Trial and error seems to have shown that the best separator between levels is the “greater than” character (>), probably because it visually suggests forward motion down through the levels.
最后一项加粗。列表中的最后一项应该是当前页面的名称,将其设置为粗体可以使其得到应有的突出显示。因为这是您所在的页面,所以它自然不是链接。
Boldface the last item. The last item in the list should be the name of the current page, and making it bold gives it the prominence it deserves. And because it’s the page that you’re on, naturally it’s not a link.
我还无法证明这一点,但我强烈怀疑列奥纳多·达·芬奇在 15 世纪末的某个时候发明了标签分隔器。就接口设备而言,它们显然是天才的产物。
I haven’t been able to prove it (yet), but I strongly suspect that Leonardo da Vinci invented tab dividers sometime in the late 15th century. As interface devices go, they’re clearly a product of genius.
选项卡是在用户界面中使用物理隐喻真正起作用的极少数情况之一。就像三环活页夹中的标签分隔线或文件抽屉中文件夹上的标签一样,它们将伸出的任何内容分成几个部分。而且,通过触及某个部分的选项卡(或者,对于 Web,单击它)可以轻松打开某个部分。
Tabs are one of the very few cases where using a physical metaphor in a user interface actually works. Like the tab dividers in a three-ring binder or tabs on folders in a file drawer, they divide whatever they’re sticking out of into sections. And they make it easy to open a section by reaching for its tab (or, in the case of the Web, clicking on it).
我认为它们是一个出色且未得到充分利用的导航选择。这就是我喜欢它们的原因:
I think they’re an excellent and underused navigation choice. Here’s why I like them:
他们是不言而喻的。我从未见过任何人——无论多么“电脑盲”——看着选项卡式界面并说,“嗯。我想知道那些是做什么的?”
They’re self-evident. I’ve never seen anyone—no matter how “computer illiterate”—look at a tabbed interface and say, “Hmmm. I wonder what those do?”
他们很难错过。当我进行可用性测试时,我惊讶地发现人们经常忽视网页顶部的水平导航栏。但选项卡在视觉上非常独特,很难被忽视。而且因为它们很难被误认为是导航以外的任何东西,所以它们在导航和内容之间创建了您想要的一目了然的划分。
They’re hard to miss. When I do usability tests, I’m surprised at how often people can overlook horizontal navigation bars at the top of a Web page. But tabs are so visually distinctive that they’re hard to overlook. And because they’re hard to mistake for anything but navigation, they create the kind of obvious-at-a-glance division you want between navigation and content.
它们很光滑。网页设计师总是努力让页面在视觉上更加有趣。如果做得正确,选项卡可以起到润色作用并起到有用的作用。
They’re slick. Web designers are always struggling to make pages more visually interesting. If done correctly, tabs can add polish and serve a useful purpose.
但是,如果您要使用选项卡,则必须正确使用它们。
If you’re going to use tabs, though, you have to do them right.
为了让选项卡充分发挥作用,图形必须创造出活动选项卡位于其他选项卡前面的视觉错觉。这是让它们感觉像标签的主要原因,甚至比独特的标签形状更重要。
For tabs to work to full effect, the graphics have to create the visual illusion that the active tab is in front of the other tabs. This is the main thing that makes them feel like tabs—even more than the distinctive tab shape.
为了创造这种错觉,活动选项卡需要具有不同的颜色或对比色,并且它必须与其下方的空间物理连接。这就是使活动选项卡“弹出”到前面的原因。
To create this illusion, the active tab needs to be a different color or contrasting shade, and it has to physically connect with the space below it. This is what makes the active tab “pop” to the front.
现在您已经了解了所有的活动部件,您就可以尝试我的严格测试来获得良好的 Web 导航了。事情是这样的:
Now that you have a feeling for all of the moving parts, you’re ready to try my acid test for good Web navigation. Here’s how it goes:
想象一下,您被蒙住眼睛并锁在汽车后备箱中,然后行驶了一段时间,然后被扔到网站内部深处的某个页面上。如果页面设计得好,当你的视野清晰时,你应该能够毫不犹豫地回答这些问题:
Imagine that you’ve been blindfolded and locked in the trunk of a car, then driven around for a while and dumped on a page somewhere deep in the bowels of a Web site. If the page is well designed, when your vision clears you should be able to answer these questions without hesitation:
这是什么网站?(站点 ID)
What site is this? (Site ID)
我在哪个页面?(页面名称)
What page am I on? (Page name)
该网站的主要部分是什么?(章节)
What are the major sections of this site? (Sections)
在这个级别我有哪些选择?(本地导航)
What are my options at this level? (Local navigation)
我在事情的计划中处于什么位置?(“你在这里”指标)
Where am I in the scheme of things? (“You are here” indicators)
我怎样才能搜索?
How can I search?
为什么要以《好家伙》为主题?因为人们很容易忘记,网络体验通常更像是被绑架,而不是沿着花园小路走。当您设计页面时,人们很容易认为人们会从主页开始并遵循您布置的漂亮、整洁的路径来访问这些页面。但现实情况是,我们经常会掉进一个网站中间,不知道自己在哪里,因为我们点击了搜索引擎、社交网站或朋友发来的电子邮件中的链接,并且我们已经以前从未见过该网站的导航方案。
Why the Goodfellas motif? Because it’s so easy to forget that the Web experience is often more like being abducted than following a garden path. When you’re designing pages, it’s tempting to think that people will reach them by starting at the Home page and following the nice, neat paths you’ve laid out. But the reality is that we’re often dropped down in the middle of a site with no idea where we are because we’ve followed a link from a search engine, a social networking site, or email from a friend, and we’ve never seen this site’s navigation scheme before.
还有眼罩?你希望你的视野稍微模糊,因为真正的考验不是你是否能在足够的时间和仔细的审视下弄清楚它。标准必须是这些元素清晰地从页面中弹出,无论您是否仔细查看都无关紧要。您希望仅依赖事物的整体外观,而不是细节。
And the blindfold? You want your vision to be slightly blurry, because the true test isn’t whether you can figure it out given enough time and close scrutiny. The standard needs to be that these elements pop off the page so clearly that it doesn’t matter whether you’re looking closely or not. You want to be relying solely on the overall appearance of things, not the details.
Here’s how you perform the trunk test:
第 1 步:在网站的任意位置随机选择一个页面,然后打印。
Step 1: Choose a page anywhere in the site at random, and print it.
第 2 步:将其保持在一定距离或眯起眼睛,这样你就无法真正仔细地研究它。
Step 2: Hold it at arm’s length or squint so you can’t really study it closely.
第 3 步:尽快尝试找到并圈出以下每一项:
Step 3: As quickly as possible, try to find and circle each of these items:
站点ID
Site ID
页面名称
Page name
部分(主导航)
Sections (Primary navigation)
本地导航
Local navigation
“你在这里”指示器
“You are here” indicator(s)
搜索
Search
在您自己的网站上尝试一下,看看效果如何。然后请一些朋友也尝试一下。您可能会对结果感到惊讶。
Try it on your own site and see how well it works. Then ask some friends to try it, too. You may be surprised by the results.
让人们迈出正确步伐的重要性
THE IMPORTANCE OF GETTING PEOPLE OFF ON THE RIGHT FOOT
Lucy, you got some ’splainin’ to do.
——德西·阿纳兹,饰演瑞奇·里卡多
—DESI ARNAZ, AS RICKY RICARDO
设计主页常常让我想起经典的电视游戏节目《Beat the Clock》。
Designing a Home page often reminds me of the classic TV game show Beat the Clock.
当主持人巴德·科利尔解释她要表演的“特技”时,每位参赛者都会耐心地听。例如,“你有 45 秒的时间将五个水气球扔进绑在你头上的漏勺中。”
Each contestant would listen patiently while emcee Bud Collyer explained the “stunt” she had to perform. For instance, “You have 45 seconds to toss five of these water balloons into the colander strapped to your head.”
这个特技看起来总是很棘手,但只要有一点运气就可以做到。
The stunt always looked tricky, but doable with a little luck.
但当参赛者准备开始时,巴德总是会补充道,“哦,还有一件事:你必须这样做……蒙住眼睛。” 或者“……在水下”。或者“……在第五维度。”
But then just as the contestant was ready to begin, Bud would always add, “Oh, there’s just one more thing: you have to do it...blindfolded.” Or “...under water.” Or “...in the fifth dimension.”
巴德·科利尔 (Bud Collyer) 为勇敢的参赛者提供鼓励的话
Bud Collyer offers words of encouragement to a plucky contestant
主页就是这样。当您认为自己已经涵盖了所有基础时,总是只有一件……更多……事情。
It’s that way with the Home page. Just when you think you’ve covered all the bases, there’s always just one...more...thing.
考虑一下主页必须容纳的所有内容:
Think about all the things the Home page has to accommodate:
网站的身份和使命。主页必须立即告诉我这是什么网站以及它的用途,如果可能的话,为什么我应该在这里而不是在其他网站。
Site identity and mission. Right off the bat, the Home page has to tell me what site this is and what it’s for—and if possible, why I should be here and not at some other site.
站点层次结构。主页必须概述网站所提供的内容——内容(“我在这里可以找到什么?”)和功能(“我在这里可以做什么?”)——以及它是如何组织的。这通常由持久导航来处理。
Site hierarchy. The Home page has to give an overview of what the site has to offer—both content (“What can I find here?”) and features (“What can I do here?”)—and how it’s all organized. This is usually handled by the persistent navigation.
搜索。大多数网站都需要在主页上显着位置显示搜索框。
Search. Most sites need to have a prominently displayed search box on the Home page.
挑逗。就像杂志的封面一样,主页需要用里面的“好东西”的暗示来吸引我。
Teases. Like the cover of a magazine, the Home page needs to entice me with hints of the “good stuff” inside.
内容促销重点关注最新、最好或最受欢迎的内容,例如头条新闻和热门优惠。
Content promos spotlight the newest, best, or most popular pieces of content, like top stories and hot deals.
功能促销邀请我探索网站的其他部分或尝试功能。
Feature promos invite me to explore additional sections of the site or try out features.
内容及时。如果网站的成功取决于我经常回来,那么主页可能需要有一些经常更新的内容。即使是一个不需要定期访问者的网站也需要一些生命迹象——即使只是最近新闻稿的链接——以向我表明它没有被遗弃或无可救药地过时。
Timely content. If the site’s success depends on my coming back often, the Home page probably needs to have some content that gets updated frequently. And even a site that doesn’t need regular visitors needs some signs of life—even if only a link to a recent press release—to signal to me that it’s not abandoned or hopelessly outdated.
交易。主页空间需要分配用于任何广告、交叉促销和联合品牌交易。
Deals. Home page space needs to be allocated for whatever advertising, cross-promotion, and co-branding deals have been made.
快捷方式。最常请求的内容(例如软件更新)可能应该在主页上有自己的链接,这样人们就不必寻找它们。
Shortcuts. The most frequently requested pieces of content (software updates, for instance) may deserve their own links on the Home page so that people don’t have to hunt for them.
登记。如果网站使用注册,则主页需要链接或文本框供新用户注册和老用户登录,以及让我知道我已登录的方式(“欢迎回来,Steve Krug”)。
Registration. If the site uses registration, the Home page needs links or text boxes for new users to register and old users to sign in and a way to let me know that I’m signed in (“Welcome back, Steve Krug”).
除了这些具体需求之外,主页还必须满足一些抽象目标:
In addition to these concrete needs, the Home page also has to meet a few abstract objectives:
告诉我我在寻找什么。主页需要清楚地表明如何到达我想要的任何内容——假设它位于网站的某个位置。
Show me what I’m looking for. The Home page needs to make it obvious how to get to whatever I want—assuming it’s somewhere on the site.
...以及我不寻找的东西。同时,主页需要让我了解该网站提供的一些我可能感兴趣的精彩内容,尽管我并没有主动寻找它们。
...and what I’m not looking for. At the same time, the Home page needs to expose me to some of the wonderful things the site has to offer that I might be interested in—even though I’m not actively looking for them.
告诉我从哪里开始。没有什么比遇到新主页却不知道从哪里开始更糟糕的了。
Show me where to start. There’s nothing worse than encountering a new Home page and having no idea where to begin.
建立信誉和信任。对于某些访问者来说,主页将是您的网站给人留下好印象的唯一机会。
Establish credibility and trust. For some visitors, the Home page will be the only chance your site gets to create a good impression.
似乎这还不够令人畏惧,这一切都必须在不利的条件下完成。一些常见的限制:
As if that wasn’t daunting enough, it all has to be done under adverse conditions. Some of the usual constraints:
每个人都想分一杯羹。由于它可能是比其他任何页面都被更多访问者看到的页面,并且是一些访问者会看到的唯一页面,因此在主页上突出宣传的内容往往会获得更大的流量。
Everybody wants a piece of it. Since it’s likely to be the page seen by more visitors than any other—and the only page some visitors will see—things that are prominently promoted on the Home page tend to get significantly greater traffic.
因此,主页是网络的海滨财产:它是最令人向往的房地产,而且供应量非常有限。每个在该网站中拥有股份的人都希望获得促销信息或指向其主页上的部分的链接,并且主页可见度的地盘争夺战可能会非常激烈。有时,当我查看主页时,我感觉就像《第六感》中的男孩:“我看到了利益相关者。”
As a result, the Home page is the waterfront property of the Web: It’s the most desirable real estate, and there’s a very limited supply. Everybody who has a stake in the site wants a promo or a link to their section on the Home page, and the turf battles for Home page visibility can be fierce. Sometimes when I look at a Home page, I feel like the boy in The Sixth Sense: “I see stakeholders.”
“大学网站”| 西客CD网
“University Website” | xkcd.com
利益相关者设计的结果。
The result of design by stakeholders.
维恩图并不完全准确:一些大学网站的主页上没有学校的全名。
The Venn diagram isn’t entirely accurate: Some university sites don’t have the full name of the school on the Home page.
鉴于大多数用户倾向于向下浏览页面足以找到有趣的链接,主页上相对较小的“首屏”空间是首选的海滨财产,甚至更加激烈地争夺。
And given the tendency of most users to scan down the page just far enough to find an interesting link, the comparatively small amount of space “above the fold” on the Home page is the choice waterfront property, even more fiercely fought over.
厨师太多了。因为主页非常重要,所以它是每个人(甚至首席执行官)都有意见的页面。
Too many cooks. Because the Home page is so important, it’s the one page that everybody (even the CEO) has an opinion about.
一种尺寸适合所有人。与较低级别的页面不同,主页必须吸引访问该网站的每个人,无论他们的兴趣有多么不同。
One size fits all. Unlike lower-level pages, the Home page has to appeal to everyone who visits the site, no matter how diverse their interests.
考虑到主页必须完成的所有任务,如果网站非常复杂,那么即使是最好的主页设计也无法完成所有任务。设计主页不可避免地需要妥协。随着妥协的达成,以及挤进另一件事的压力越来越大,有些东西不可避免地会在洗牌中丢失。
Given everything the Home page has to accomplish, if a site is at all complex even the best Home page design can’t do it all. Designing a Home page inevitably involves compromise. And as the compromises are worked out and the pressure mounts to squeeze in just one more thing, some things inevitably get lost in the shuffle.
在混乱中你不能失去的一件事——也是最容易丢失的一件事——就是传达大局。每当有人递给我一个主页设计供我查看时,我几乎总是可以信赖一件事:他们没有足够清楚地说明该网站是什么。
The one thing you can’t afford to lose in the shuffle—and the thing that most often gets lost—is conveying the big picture. Whenever someone hands me a Home page design to look at, there’s one thing I can almost always count on: They haven’t made it clear enough what the site is.
当我第一次进入一个新网站时,主页需要尽可能快速、清晰地回答我脑海中的四个问题:
As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time:
我需要能够毫不费力地一目了然、正确且明确地回答这些问题。
I need to be able to answer these questions at a glance, correctly and unambiguously, with very little effort.
如果我在最初几秒钟内不清楚自己在看什么,那么解释页面上的其他所有内容就会变得更加困难,而且我更有可能误解某些内容并感到沮丧。
If it’s not clear to me what I’m looking at in the first few seconds, interpreting everything else on the page is harder, and the chances are greater that I’ll misinterpret something and get frustrated.
但如果我确实“明白了”,我就更有可能正确解释我在页面上看到的所有内容,这大大提高了我获得满意、成功体验的机会。
But if I do “get it,” I’m much more likely to correctly interpret everything I see on the page, which greatly improves my chances of having a satisfying, successful experience.
这就是我所说的网页设计大爆炸理论。与大爆炸理论一样,它基于这样的理念:您在新网站或网页上花费的最初几秒钟至关重要。
This is what I call the Big Bang Theory of Web Design. Like the Big Bang Theory, it’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical.
我们现在从一个非常优雅的实验(搜索“注意网页设计师:你有 50 毫秒的时间来留下良好的第一印象!”)知道,只要你打开一个页面,就会发生很多事情。例如,您快速环顾四周(以毫秒为单位)并形成一些总体印象:它看起来不错吗?内容多还是少?页面上是否有清晰的区域?哪些吸引你?
We know now from a very elegant experiment (search for “Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression!”) that a lot happens as soon as you open a page. For instance, you take a quick look around (in milliseconds) and form a number of general impressions: Does it look good? Is there a lot of content or a little? Are there clear regions of the page? Which ones attract you?
该实验最有趣的事情是,他们表明这些最初的印象往往与人们实际有机会在该页面上花费时间后的印象非常相似。换句话说,我们会做出仓促的判断,但它们往往是我们更合理的评估的相当可靠的预测指标。
The most interesting thing about the experiment was that they showed that these initial impressions tended to be very similar to the impressions people had after they actually had a chance to spend time on the page. In other words, we make snap judgments, but they tend to be a pretty reliable predictor of our more reasoned assessments.
这并不是说我们最初对事物的理解总是正确的。事实上,我在可用性测试中最常看到的事情之一是,人们对事物是什么以及它们如何工作形成的想法是错误的。然后他们使用这些最初的“知识”来帮助解释他们所看到的一切。
This is not to say that our initial understanding of things is always right. In fact, one of the things I’ve seen most often in usability tests is that people form ideas about what things are and how they work which are just wrong. Then they use these first bits of “knowledge” to help interpret everything they see.
如果他们的第一个假设是错误的(“这是一个____的网站”),他们就会开始尝试将这种解释强加到他们遇到的所有事情上。如果是错误的,他们最终会造成更多的误解。如果人们一开始就迷失了方向,他们通常会继续迷失方向。
If their first assumptions are wrong (“This is a site for ____”), they begin to try to force-fit that explanation on to everything they encounter. And if it’s wrong, they’ll end up creating more misinterpretations. If people are lost when they start out, they usually just keep getting...loster.
这就是为什么让它们顺利起步并确保它们在大局上清晰可见如此重要。
This is why it’s so crucial that you get them off on the right foot, making sure that they’re clear on the big picture.
不要误会我的意思:其他一切都很重要。你确实需要给我留下深刻的印象,吸引我,指导我,让我了解你的交易。但这些事情不会从裂缝中溜走;它们会被忽视。开发团队内部和外部总会有很多人来确保他们完成任务。然而,很多时候,没有人能够从阐明要点中获得既得利益。
Don’t get me wrong: Everything else is important. You do need to impress me, entice me, direct me, and expose me to your deals. But these things won’t slip through the cracks; there will always be plenty of people—inside and outside the development team—seeing to it that they get done. All too often, though, no one has a vested interest in getting the main point across.
The Top Four Plausible Excuses for not Spelling Out the Big Picture on the Home Page
“没有人再通过主页进入网站了。2004年就是这样。”
“Nobody enters a site through the Home page anymore. That’s so 2004.”
当然,你是对的。与早期的网络相比,主页已经失去了它的卓越地位。现在,人们同样有可能(或者更有可能)通过单击电子邮件、博客或社交网络中的链接来进入您的网站,这些链接会将他们直接带到您网站深处的页面。
And you’re right, of course. Compared to the early days of the Web, the Home page has lost its preeminence. Now people are just as likely—or more likely—to enter your site by clicking on a link in an email, a blog, or something from a social network that takes them directly to a page deep in your site.
因此,您网站的每个页面都应该尽可能正确地引导他们:让他们正确了解您是谁、您做什么以及您的网站必须提供什么。
Because of this, every page of your site should do as much as it can to orient them properly: to give them the right idea about who you are, what you do, and what your site has to offer.
但问题是,大多数页面上没有足够的空间来做到这一点。结果,许多用户形成了新的行为。
The problem is, though, there’s not much space on most pages to do that well. As a result, many users have formed a new behavior.
人们会传送到网站的深处并查看链接将他们带到的页面。不过,通常情况下,他们接下来要做的就是访问主页来了解自己的方位。(我喜欢把它想象成潜水员浮出水面看看他们在哪里。)如果他们访问的页面很有趣,他们想看看网站上还有什么。如果其中包含他们需要依赖的信息,他们可能想知道是谁发布的,以及它的可信度如何。
People will teleport into the depths of a site and look at the page the link took them to. Very often, though, the next thing they’ll do is visit the Home page to get their bearings. (I like to think of it as divers bobbing up to the surface to see where they are.) If the page they went to was interesting, they want to see what else is on the site. If it contained information they need to rely on, they may want to find out who publishes it, and how credible it is.
首页仍然是发生这种情况的地方,你需要做好它。
The Home page is still the place where this happens, and you need to do it well.
主页上的所有内容都有助于我们了解该网站是什么。但是,我们希望在页面上的三个重要位置找到有关该网站内容的明确声明。
Everything on the Home page can contribute to our understanding of what the site is. But there are three important places on the page where we expect to find explicit statements of what the site is about.
标语。房地产中最有价值的部分之一是站点 ID 旁边的空间。当我们看到一个在视觉上与 ID 相关的短语时,我们知道它是一个标语,因此我们将其视为整个网站的描述。我们将在下一节中详细介绍标语。
The tagline. One of the most valuable bits of real estate is the space right next to the Site ID. When we see a phrase that’s visually connected to the ID, we know it’s meant to be a tagline, and so we read it as a description of the whole site. We’ll look at taglines in detail in the next section.
欢迎标语。欢迎简介是对网站的简洁描述,显示在主页上的显着区域中,通常位于内容空间的左上角或中心,因此它是第一个吸引您眼球的内容。
The Welcome blurb. The Welcome blurb is a terse description of the site, displayed in a prominent block on the Home page, usually at the top left or center of the content space so it’s the first thing that catches your eye.
“了解更多”。创新产品和商业模式往往需要大量的解释,这往往超出了大多数人的耐心。但人们已经习惯在电脑和移动设备上观看短视频。因此,人们现在开始期待大多数网站上有简短的解释视频,并且通常愿意观看它们。
The “Learn more.” Innovative products and business models tend to require a fair amount of explanation, often more than most people have the patience for. But people have become accustomed to watching short videos on their computers and mobile devices. As a result, people have now come to expect a short explanatory video on most sites and are often willing to watch them.
重点不是每个人都会使用这三个元素,甚至不是每个人都会注意到它们。大多数用户可能会首先尝试从主页的整体内容来猜测该网站是什么。但如果他们无法猜测,您希望在页面上有某个地方可以让他们找到答案。
The point isn’t that everyone will use these three elements—or even that everyone will notice them. Most users will probably try to guess what the site is first from the overall content of the Home page. But if they can’t guess, you want to have someplace on the page where they can go to find out.
以下是传达信息的一些准则:
Here are a few guidelines for getting the message across:
根据需要使用尽可能多的空间。诱惑是不想使用任何空间,因为(a)你无法想象任何人不知道这个网站是什么,以及(b)每个人都吵着将主页空间用于其他目的。
Use as much space as necessary. The temptation is to not want to use any space because (a) you can’t imagine that anybody doesn’t know what this site is, and (b) everyone’s clamoring to use the Home page space for other purposes.
以 Kickstarter.com 为例。由于他们的新颖主张,Kickstarter 有很多“解释”要做,因此他们明智地使用大量主页空间来做到这一点。页面上几乎每个元素都有助于解释或强化网站的内容。
Take Kickstarter.com, for example. Because of their novel proposition, Kickstarter has a lot of ’splainin’ to do, so they wisely use a lot of Home page space to do it. Almost every element on the page helps explain or reinforce what the site is about.
Kickstarter 可能没有口号(除非它是“将创造力带入生活”),但他们确实付出了令人钦佩的努力来确保人们了解他们在做什么以及它是如何运作的。
Kickstarter may not have a tagline (unless it’s “Bring creativity to life”) but they do put an admirable amount of effort into making sure people understand what they do and how it works.
“Kickstarter 是什么?” 显然是主导航中最突出的项目。
“What is Kickstarter?” is clearly the most prominent item in the primary navigation.
...但不要使用不必要的空间。对于大多数网站来说,不需要使用大量空间来传达基本主张,而且占据整个主页的消息通常太多,人们无论如何也懒得去吸收。保持简短——只要足以表达要点即可,不要太长。不要觉得有必要提及每一个伟大的功能,只需提及一些最重要的功能即可。
...but don’t use any more space than necessary. For most sites, there’s no need to use a lot of space to convey the basic proposition, and messages that take up the entire Home page are usually too much for people to bother absorbing anyway. Keep it short—just long enough to get the point across, and no longer. Don’t feel compelled to mention every great feature, just a few of the most important ones.
不要使用使命宣言作为欢迎简介。许多网站的主页上都写满了公司使命宣言,听起来像是美国小姐决赛入围者写的。“XYZCorp 在诸如此类的新兴领域提供世界一流的解决方案……”没有人读它们。
Don’t use a mission statement as a Welcome blurb. Many sites fill their Home page with their corporate mission statement that sounds like it was written by a Miss America finalist. “XYZCorp offers world-class solutions in the burgeoning field of blah blah blah blah blah....” Nobody reads them.
这是要测试的最重要的事情之一。你不能相信自己对此的判断。您需要向组织外部的人员展示主页,以告诉您设计是否完成了这项工作,因为“要点”是组织内部没有人注意到的遗漏的一件事。
It’s one of the most important things to test. You can’t trust your own judgment about this. You need to show the Home page to people from outside your organization to tell you whether the design is getting this job done because the “main point” is the one thing nobody inside the organization will notice is missing.
口号是一个简洁的短语,它描述了整个企业的特征,总结了它是什么以及它的伟大之处。广告、娱乐和出版业中的标语早已存在:“数以千计的汽车以难以置信的低价”、“明星比天上还多”1 以及“所有适合印刷的新闻” 2例如。
A tagline is a pithy phrase that characterizes the whole enterprise, summing up what it is and what makes it great. Taglines have been around for a long time in advertising, entertainment, and publishing: “Thousands of cars at impossibly low prices,” “More stars than there are in the heavens,”1 and “All the News That’s Fit to Print,”2 for example.
1 米高梅工作室,20 世纪 30 年代和 40 年代。
1 Metro-Goldwyn-Mayer studios, in the 1930s and ’40s.
2纽约时报。不过,我必须承认我个人更喜欢《疯狂》杂志的模仿版本:“所有适合的新闻,我们都会印刷。”
2 The New York Times. I have to confess a personal preference for the Mad magazine parody version, though: “All the News That Fits, We Print.”
在网站上,标语出现在网站 ID 的正下方、上方或旁边。
On a Web site, the tagline appears right below, above, or next to the Site ID.
标语是传达信息的一种非常有效的方式,因为它们是页面上用户最希望找到网站目的的简洁说明的地方。
Taglines are a very efficient way to get your message across, because they’re the one place on the page where users most expect to find a concise statement of the site’s purpose.
Some attributes to look for when choosing a tagline:
好的标语清晰且信息丰富,并准确解释您的网站或组织的用途。
Good taglines are clear and informative and explain exactly what your site or your organization does.
好的标语只要足够长,但又不能太长。六到八个词似乎足够长,可以表达完整的想法,但也足够短,可以轻松吸收。
Good taglines are just long enough, but not too long. Six to eight words seem to be long enough to convey a full thought, but short enough to absorb easily.
好的标语传达出差异化和明显的优势。雅各布·尼尔森(Jakob Nielsen)提出,真正好的口号是世界上除了你之外没有人可以使用的口号,我认为这是一种很好的看待它的方式。
Good taglines convey differentiation and a clear benefit. Jakob Nielsen has suggested that a really good tagline is one that no one else in the world could use except you, and I think it’s an excellent way to look at it.
国家电网可能可以使用座右铭而不是差异化的口号,因为他们是一家拥有固定受众的公用事业公司,因此差异化不是问题。
NationalGrid can probably get away with using a motto instead of a differentiating tagline, because they’re a public utility with a captive audience, so differentiation isn’t an issue.
不要将口号与座右铭混淆,例如“我们将美好的事物带入生活”、“您得到良好的照顾”或“保护和服务”。座右铭表达指导原则、目标或理想,而口号则传达价值主张。座右铭是崇高而令人安心的,但如果我不知道那是什么,座右铭就不会告诉我。
Don’t confuse a tagline with a motto, like “We bring good things to life,” “You’re in good hands,” or “To protect and to serve.” A motto expresses a guiding principle, a goal, or an ideal, but a tagline conveys a value proposition. Mottoes are lofty and reassuring, but if I don’t know what the thing is, a motto isn’t going to tell me.
好的口号是风度翩翩、活泼,有时甚至是聪明的。聪明是好事,但前提是聪明能有助于传达(而不是掩盖)好处。
Good taglines are personable, lively, and sometimes clever. Clever is good, but only if the cleverness helps convey—not obscure—the benefit.
有些网站没有标语也能过得去。例如:
Some sites can get by without a tagline. For instance:
已经达到家喻户晓地位的网站相对较少。
The relative handful of sites that have already achieved household word status.
这些网站因其线下起源而广为人知。
Sites that are very well known from their offline origins.
但就我个人而言,我认为即使是这些网站也会从口号中受益。毕竟,无论您有多出名,为什么要放弃一个不引人注目的机会来告诉人们为什么他们在您的网站上过得更好呢?即使一个网站来自强大的线下品牌,线上的使命也永远不会完全相同,因此解释其中的差异很重要。
Personally, though, I’d argue that even these sites would benefit from a tagline. After all, no matter how well known you are, why pass up an unobtrusive chance to tell people why they’re better off at your site? And even if a site comes from a strong offline brand, the mission online is never exactly the same and it’s important to explain the difference.
一旦我知道我在看什么,主页还必须回答一个更重要的问题:
Once I know what I’m looking at, there’s still one more important question that the Home page has to answer for me:
当我进入一个新网站时,快速浏览一下主页后,我应该可以自信地说:
When I enter a new site, after a quick look around the Home page I should be able to say with confidence:
如果我想搜索,可以从这里开始。
Here’s where to start if I want to search.
如果我想浏览,可以从这里开始。
Here’s where to start if I want to browse.
如果我想品尝他们最好的东西,可以从这里开始。
Here’s where to start if I want to sample their best stuff.
在围绕逐步流程(例如申请抵押贷款)构建的网站上,该流程的入口点应该会突然出现在我面前。在新用户必须注册或老用户必须登录的网站上,我注册或登录的位置应该显眼。
On sites that are built around a step-by-step process (applying for a mortgage, for instance), the entry point for the process should leap out at me. And on sites where I have to register if I’m a new user or sign in if I’m a returning user, the places where I register or sign in should be prominent.
不幸的是,推广一切(或者至少支持本周商业模式的一切)的需要有时会掩盖这些切入点。当页面上充满了喊着“从这里开始!”的宣传片时,很难找到它们。和“不,先点击我!”
Unfortunately, the need to promote everything (or at least everything that supports this week’s business model) sometimes obscures these entry points. It can be hard to find them when the page is full of promos yelling “Start here!” and “No, click me first!”
防止这种情况发生的最佳方法是使入口点看起来像入口点(即,使搜索框看起来像搜索框,而部分列表看起来像部分列表)。它还有助于清楚地标记它们,使用“搜索”、“按类别浏览”、“登录”和“从这里开始”(用于分步过程)等标签。
The best way to keep this from happening is to make the entry points look like entry points (i.e., make the search box look like a search box and the list of sections look like a list of sections). It also helps to label them clearly, with labels like “Search,” “Browse by Category,” “Sign in,” and “Start here” (for a step-by-step process).
主页上的某些内容似乎会激发短视行为。当我参加有关主页设计的会议时,我经常发现“杀死金鹅”这句话在我的脑海中闪过。3
There’s something about the Home page that seems to inspire shortsighted behavior. When I sit in on meetings about Home page design, I often find the phrase “killing the golden goose” running through my head.3
3 我一直以为这句话出自《杰克与魔豆》的故事。事实上,杰克巨人确实有一只会下金蛋的鹅,但没有人试图杀死它。毫无意义的屠杀发生在伊索寓言之一中,情节上并没有太多内容:人找到了鹅,人变得贪婪,人杀死了鹅,人再也得不到鸡蛋。寓意:“贪婪常常会超出自己的限度。”
3 I always thought that the phrase came from the story of Jack and the Beanstalk. In fact, Jack’s Giant did have a goose that laid golden eggs, but nobody tried to kill it. The senseless slaughter occurs in one of Aesop’s fables, and there’s not much to it, plot-wise: Man finds goose, man gets greedy, man kills goose, man gets no more eggs. Moral: “Greed often overreaches itself.”
当然,这些行为中最糟糕的是试图推销一切的倾向。
The worst of these behaviors, of course, is the tendency to try to promote everything.
在主页上推广东西的问题在于它效果太好了。任何具有显着主页链接的内容实际上都可以保证获得更多流量(通常是更多流量),从而导致网站的所有利益相关者思考:“为什么我不拥有一个?”
The problem with promoting things on the Home page is that it works too well. Anything with a prominent Home page link is virtually guaranteed to get more traffic—usually a great deal more—leading all of the site’s stakeholders to think, “Why don’t I have one?”
问题是,向主页添加更多内容的回报和成本并没有平均分配。正在推广的部分获得了巨大的流量增益,而主页的整体有效性由于变得更加混乱而受到所有部分的影响。
The problem is, the rewards and the costs of adding more things to the Home page aren’t shared equally. The section that’s being promoted gets a huge gain in traffic, while the overall loss in effectiveness of the Home page as it gets more cluttered is shared by all sections.
这是公地悲剧的一个完美例子。4前提很简单:
It’s a perfect example of the tragedy of the commons.4 The premise is simple:
4 这一概念由 19 世纪业余数学家威廉·福斯特·劳埃德 (William Forster Lloyd) 提出,并在生物学家加勒特·哈丁 (Garrett Hardin) 的一篇关于人口过剩的经典文章中得到普及(“公地悲剧”,《科学》,1968 年 12 月)。
4 The concept, originated by nineteenth-century amateur mathematician William Forster Lloyd, was popularized in a classic essay on overpopulation by biologist Garrett Hardin (“The Tragedy of the Commons,” Science, December 1968).
任何共享资源(“公共资源”)都将不可避免地因过度使用而遭到破坏。
Any shared resource (a “commons”) will inevitably be destroyed by overuse.
以城镇牧场为例。牧民每在公共牧场上添加一头动物,他就能获得出售该动物的所有收益——+1 的正收益。但增加动物的负面影响——它对过度放牧的影响——是所有人共同承担的,因此对个体牧民的影响小于-1。
Take a town pasture, for example. For each animal a herdsman adds to the common pasture, he receives all proceeds from the sale of the animal—a positive benefit of +1. But the negative impact of adding an animal—its contribution to overgrazing—is shared by all, so the impact on the individual herdsman is less than –1.
对于每个牧民来说,唯一明智的做法是在牧群中添加另一只动物。又一个,又一个——最好是在其他人之前。由于每个理性的牧民都会得出相同的结论,所以公地注定会失败。
The only sensible course for each herdsman is to add another animal to the herd. And another, and another—preferably before someone else does. And since each rational herdsman will reach the same conclusion, the commons is doomed.
保护主页免受促销过载的影响需要时刻保持警惕,因为它通常是逐渐发生的,缓慢而无情地添加……一个……更多……东西。
Preserving the Home page from promotional overload requires constant vigilance, since it usually happens gradually, with the slow, inexorable addition of just...one...more...thing.
所有利益相关者都需要了解过度浏览主页的危险,并提供其他增加流量的方法,例如从其他热门页面进行交叉推广或轮流使用主页上的同一空间。
All the stakeholders need to be educated about the danger of overgrazing the Home page and offered other methods of driving traffic, like cross-promoting from other popular pages or taking turns using the same space on the Home page.
为什么大多数关于可用性的争论都是浪费时间,以及如何避免它们
WHY MOST ARGUMENTS ABOUT USABILITY ARE A WASTE OF TIME, AND HOW TO AVOID THEM
一个人喜欢推犁,另一个人喜欢追牛,但这并不是他们不能成为朋友的理由!
One man likes to push a plough The other likes to chase a cow But that’s no reason why they can’t be friends!
—俄克拉荷马州!,奥斯卡·汉默斯坦二世
—OKLAHOMA!, OSCAR HAMMERSTEIN II
如果只依靠自己的设备,网络团队在做出有关可用性问题的决策方面并不是很成功。大多数团队最终都会花费大量宝贵的时间一遍又一遍地重复相同的问题。
Left to their own devices, Web teams aren’t notoriously successful at making decisions about usability questions. Most teams end up spending a lot of precious time rehashing the same issues over and over.
考虑这个场景:
Consider this scene:
我通常将这些无休止的讨论称为“宗教辩论”,因为它们与大多数宗教和政治讨论有很多共同点:它们主要由人们对无法证明的事物表达强烈的个人信念——据说是为了利益就做某事的最佳方式达成一致重要(无论是实现永久和平、有效治理,还是只是设计网页)。而且,像大多数宗教辩论一样,它们很少导致任何参与其中的人改变他或她的观点。
I usually call these endless discussions “religious debates,” because they have a lot in common with most discussions of religion and politics: They consist largely of people expressing strongly held personal beliefs about things that can’t be proven—supposedly in the interest of agreeing on the best way to do something important (whether it’s attaining eternal peace, governing effectively, or just designing Web pages). And, like most religious debates, they rarely result in anyone involved changing his or her point of view.
除了浪费时间之外,这些争论还会在团队成员之间造成紧张并削弱尊重,并且常常会阻止团队做出关键决策。
Besides wasting time, these arguments create tension and erode respect among team members and can often prevent the team from making critical decisions.
不幸的是,大多数 Web 团队中都有多种力量在起作用,使得这些争论几乎不可避免。在本章中,我将描述这些力量并解释我认为最好的解药。
Unfortunately, there are several forces at work in most Web teams that make these debates almost inevitable. In this chapter, I’ll describe these forces and explain what I think is the best antidote.
我们所有在网站上工作的人都有一个共同点——我们也是网络用户。与所有网络用户一样,我们往往对自己喜欢和不喜欢网站的内容有强烈的感觉。
All of us who work on Web sites have one thing in common—we’re also Web users. And like all Web users, we tend to have strong feelings about what we like and don’t like about Web sites.
作为个人,我们喜欢顶部有主菜单、左侧有子菜单的页面,因为它们熟悉且易于使用,或者我们讨厌它们,因为它们太无聊了。我们喜欢带有大型图像的页面,因为它们很吸引人,或者我们讨厌它们,因为我们只想了解内容。我们真的很喜欢使用带有______的网站,或者我们发现______是一种巨大的痛苦。
As individuals, we love pages with main menus across the top and submenus down the left side because they’re familiar and easy to use, or we hate them because they’re so boring. We love pages with large evocative images because they’re engaging, or we hate them because we just want to get to the content. We really enjoy using sites with ______, or we find ______ to be a royal pain.
当我们在网络团队工作时,事实证明很难在门口检查这些感受。
And when we’re working on a Web team, it turns out to be very hard to check those feelings at the door.
结果通常是一屋子的人都对如何打造一个好的网站有着强烈的个人信念。
The result is usually a room full of individuals with strong personal convictions about what makes for a good Web site.
考虑到这些信念的强度和人性,人们很自然地倾向于将这些好恶投射到一般用户身上:认为大多数用户喜欢我们喜欢的东西。我们倾向于认为大多数用户都像我们一样。
And given the strength of these convictions—and human nature—there’s a natural tendency to project these likes and dislikes onto users in general: to think that most users like the same things we like. We tend to think that most users are like us.
并不是我们认为每个人都像我们一样。我们知道有些人讨厌我们喜欢的东西——毕竟,他们中的一些人甚至在我们自己的网络团队中。但不是理智的人。而且数量并不多。
It’s not that we think that everyone is like us. We know there are some people out there who hate the things we love—after all, there are even some of them on our own Web team. But not sensible people. And there aren’t many of them.
除了个人热情之外,还有另一层:职业热情。就像俄克拉荷马州的农民和牧牛人一样, Web 团队的成员根据他们的工作,对什么是良好的 Web 设计有着截然不同的看法。1
On top of this layer of personal passion, there’s another layer: professional passion. Like the farmers and the cowmen in Oklahoma!, the players on a Web team have very different perspectives on what constitutes good Web design based on what they do for a living.1
1 剧中节俭、敬畏上帝、顾家的农民总是与随心所欲、生活散漫的牧牛人格格不入。农民喜欢栅栏,牧牛人喜欢开阔的牧场。
1 In the play, the thrifty, God-fearing, family-oriented farmers are always at odds with the freewheeling, loose-living cowmen. Farmers love fences, cowmen love the open range.
工作是……的人所看到的理想网页
The ideal Web page as seen by someone whose job is...
在我看来,这些人可能因为他们的身份而从事他们所做的工作。例如,设计师之所以成为设计师,可能是因为他们享受愉悦的视觉体验。他们从充满优雅字体和微妙视觉线索的页面中获得发自内心的愉悦。其中涉及内啡肽。
It’s always seemed to me that these people probably have the jobs they do because of who they are. Designers, for instance, probably became designers because they enjoy pleasant visual experiences. They get visceral pleasure from looking at pages full of elegant type and subtle visual cues. There are endorphins involved.
开发人员往往喜欢复杂性。他们喜欢弄清楚事物是如何运作的,在头脑中对它们进行逆向工程,并寻找他们可以使用的想法。同样,内啡肽在起作用。
And developers tend to like complexity. They enjoy figuring out how things work, reverse engineering them in their head, and looking for ideas they can use. Again, there are endorphins at work.
因为这些反应是在大脑化学水平上发生的,所以他们很难想象每个人的感觉并不完全相同。
And because these reactions are happening at a brain-chemical level, it’s very difficult for them to imagine that everybody doesn’t feel exactly the same way.
结果是,设计师希望构建看起来很棒的网站,而开发人员希望构建具有有趣、原创、巧妙功能的网站。我不知道在这张照片中,谁是农民,谁是牛夫,但我确实知道,当需要确定设计优先顺序时,他们观点的差异常常会导致冲突和不愉快的感觉。
The result is that designers want to build sites that look great, and developers want to build sites with interesting, original, ingenious features. I’m not sure who’s the farmer and who’s the cowman in this picture, but I do know that their differences in perspective often lead to conflict—and hard feelings—when it comes time to establish design priorities.
与此同时,设计师和开发人员经常发现自己在 Art Kleiner 所描述的炒作文化和工艺文化之间的另一场更大的冲突中站在一起。2
At the same time, designers and developers often find themselves siding together in another, larger clash between what Art Kleiner describes as the cultures of hype and craft.2
2 请参阅《strategy+business》杂志中的“互联网时代的企业文化”,网址为strategy-business.com/press/article/10374。
2 See “Corporate Culture in Internet Time” in strategy+business magazine at strategy-business.com/press/article/10374.
虽然炒作文化(高层管理、营销和业务开发)的重点是做出任何必要的承诺,以吸引风险投资、创收交易和网站用户,但兑现这些承诺的负担却落在了公司的肩上。工艺文化工匠如设计师和开发商。
While the hype culture (upper management, marketing, and business development) is focused on making whatever promises are necessary to attract venture capital, revenue-generating deals, and users to the site, the burden of delivering on those promises lands on the shoulders of the craft culture artisans like the designers and developers.
这种现代高科技版本的艺术与商业之间的长期斗争(或者也许是农民和牧牛人与铁路大亨)之间的斗争,为任何可用性问题的讨论增加了另一个层次的复杂性——通常以明显任意的法令形式下达。围栏的炒作一侧。3
This modern high-tech version of the perennial struggle between art and commerce (or perhaps farmers and cowmen vs. the railroad barons) adds another level of complexity to any discussions of usability issues—often in the form of apparently arbitrary edicts handed down from the hype side of the fence.3
3 我曾经在一个著名的(而且设计得很合理)网站的主页上看到一个特别令人费解的功能。当我询问此事时,他们告诉我:“哦,是这样。我们的首席执行官在梦中得到了它,所以我们必须添加它。” 真实的故事。
3 I once saw a particularly puzzling feature on the Home page of a prominent—and otherwise sensibly designed—site. When I asked about it, I was told, “Oh, that. It came to our CEO in a dream, so we had to add it.” True story.
相信大多数 Web 用户都像我们一样,这足以在普通的 Web 设计会议中产生僵局。但在这一信念的背后还隐藏着另一个更为阴险的信念:认为大多数网络用户都是一样的。
The belief that most Web users are like us is enough to produce gridlock in the average Web design meeting. But behind that belief lies another one, even more insidious: the belief that most Web users are like anything.
一旦个人和专业意见的冲突导致僵局,对话通常会转向寻找某种方式(无论是外部专家的意见、已发表的研究、调查还是焦点小组)来确定大多数用户喜欢或喜欢什么不喜欢——弄清楚普通网络用户到底喜欢什么。唯一的问题是,没有普通用户。
As soon as the clash of personal and professional opinions results in a stalemate, the conversation usually turns to finding some way (whether it’s the opinion of an outside expert, published research, a survey, or focus groups) to determine what most users like or don’t like—to figure out what the Average Web User is really like. The only problem is, there is no Average User.
事实上,我花在观察人们使用网络上的所有时间都让我得出了相反的结论:
In fact, all of the time I’ve spent watching people use the Web has led me to the opposite conclusion:
所有网络用户都是独一无二的,所有网络使用基本上都是独特的
ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC
你越是仔细观察用户并倾听他们阐明他们的意图、动机和思维过程,你就越会意识到他们对网页的个人反应是基于如此多的变量,这些变量试图用一维的喜好和行为来描述用户。不喜欢是徒劳的,而且会适得其反。
The more you watch users carefully and listen to them articulate their intentions, motivations, and thought processes, the more you realize that their individual reactions to Web pages are based on so many variables that attempts to describe users in terms of one-dimensional likes and dislikes are futile—and counter-productive.
关于普通用户神话的最糟糕的事情是,它强化了这样一种观念:好的网页设计很大程度上取决于人们的喜好。这是一个很有吸引力的想法:下拉要么是好的(因为大多数人喜欢它们),要么是坏的(因为大多数人不喜欢)。故事应该在一个长页面上,或者应该分成许多较短的页面。主页轮播、大型菜单、翻转等有好有坏,有黑有白。
And the worst thing about the myth of the Average User is that it reinforces the idea that good Web design is largely a matter of figuring out what people like. It’s an attractive notion: Either pull-downs are good (because most people like them), or they’re bad (because most people don’t). Stories should be on a single long page or they should be broken up into many shorter pages. Home page carousels, mega menus, rollovers, etc. are either good or bad, black or white.
问题是大多数网页设计问题都没有简单的“正确”答案(至少对于重要的问题而言)。有效的方法是满足需求的良好集成设计——经过深思熟虑、良好执行和测试。
The problem is there are no simple “right” answers for most Web design questions (at least not for the important ones). What works is good, integrated design that fills a need—carefully thought out, well executed, and tested.
这并不是说有些事情你绝对不应该做,有些事情你应该很少做。有一些设计网页的方法显然是错误的。只是它们并不是 Web 团队通常争论的事情。
That’s not to say that there aren’t some things you should never do, and some things you should rarely do. There are some ways to design Web pages that are clearly wrong. It’s just that they aren’t the things that Web teams usually argue about.
关键是,提出“大多数人喜欢下拉菜单吗?”之类的问题是没有成效的。正确的问题应该是“这个下拉菜单、这些项目以及本页上下文中的措辞是否能为大多数可能使用该网站的人带来良好的体验?”
The point is, it’s not productive to ask questions like “Do most people like pull-down menus?” The right kind of question to ask is “Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?”
实际上只有一种方法可以回答这类问题:测试。你必须利用团队的集体技能、经验、创造力和常识来构建某个版本的东西(甚至是粗略的版本),然后仔细观察一些人试图弄清楚它是什么以及如何使用它。
And there’s really only one way to answer that kind of question: testing. You have to use the collective skill, experience, creativity, and common sense of the team to build some version of the thing (even a crude version), then watch some people carefully as they try to figure out what it is and how to use it.
没有什么可以替代它。
There’s no substitute for it.
关于人们喜欢什么的争论会浪费时间并耗尽团队的精力,而可用性测试往往会化解大多数争论并打破僵局,将讨论从对错以及人们喜欢或不喜欢的领域转移到有效的领域或者不起作用。通过让我们看到用户的动机、看法和反应有多么不同,测试让我们很难一直认为所有用户都和我们一样。
Where debates about what people like waste time and drain the team’s energy, usability testing tends to defuse most arguments and break impasses by moving the discussion away from the realm of what’s right or wrong and what people like or dislike and into the realm of what works or doesn’t work. And by opening our eyes to just how varied users’ motivations, perceptions, and responses are, testing makes it hard to keep thinking that all users are like us.
你能看出我认为可用性测试是一件好事吗?
Can you tell that I think usability testing is a good thing?
下一章将介绍如何测试您自己的站点。
The next chapter explains how to test your own site.
保持测试简单——这样你就可以做得足够了
KEEPING TESTING SIMPLE—SO YOU DO ENOUGH OF IT
——在网站第一次可用性测试期间每个人都说的话
—WHAT EVERYONE SAYS AT SOME POINT DURING THE FIRST USABILITY TEST OF THEIR WEB SITE
我曾经接到过很多这样的电话:
I used to get a lot of phone calls like this:
一旦我在同一句话中听到“两周内启动”(甚至“两个月”)和“可用性测试”,我就会开始让那个老消防员冲进燃烧的化学品-工厂的感觉,因为我很清楚发生了什么。
As soon as I’d hear “launching in two weeks” (or even “two months”) and “usability testing” in the same sentence, I’d start to get that old fireman-headed-into-the-burning-chemical-factory feeling, because I had a pretty good idea of what was going on.
如果是两周,那么几乎可以肯定这是灾难检查的请求。发布会临近,每个人都变得紧张,最后有人说:“也许我们最好做一些可用性测试。”
If it was two weeks, then it was almost certainly a request for a disaster check. The launch was fast approaching and everyone was getting nervous, and someone had finally said, “Maybe we better do some usability testing.”
如果是两个月,那么他们想要的很可能是解决一些正在进行的内部争论——通常是关于美学之类的问题。办公室里的意见分为两种不同的设计:有人喜欢性感的,有人喜欢优雅的。最后,有足够影响力来批准这笔费用的人厌倦了争论,说道:“好吧,让我们做一些测试来解决这个问题。”
If it was two months, then odds were that what they wanted was to settle some ongoing internal debates—usually about something like aesthetics. Opinion around the office was split between two different designs; some people liked the sexy one, some liked the elegant one. Finally someone with enough clout to authorize the expense got tired of the arguing and said, “All right, let’s get some testing done to settle this.”
虽然可用性测试有时会解决这些争论,但它通常最终要做的主要事情是揭示他们争论的事情并不是那么重要。人们经常尝试决定哪种颜色的窗帘最好,结果却发现他们忘记在房间里装窗户。例如,他们可能会发现,如果没有人理解您网站的价值主张,那么无论您使用级联菜单还是大型菜单都没有太大区别。
And while usability testing will sometimes settle these arguments, the main thing it usually ends up doing is revealing that the things they were arguing about weren’t all that important. People often test to decide which color drapes are best, only to learn that they forgot to put windows in the room. For instance, they might discover that it doesn’t make much difference whether you go with cascading menus or mega menus if nobody understands the value proposition of your site.
这些天我接到的此类电话几乎没有那么多了,我认为这是一个好兆头,表明人们更多地意识到需要从一开始就将可用性作为每个项目的一部分。
I don’t get nearly as many of these calls these days, which I take as a good sign that there’s more awareness of the need to make usability part of every project right from the beginning.
但遗憾的是,这仍然是许多可用性测试的完成方式:太少、太晚,而且出于各种错误的原因。
Sadly, though, this is still how a lot of usability testing gets done: too little, too late, and for all the wrong reasons.
有时,最初的电话甚至更可怕:
Sometimes that initial phone call is even scarier:
当最后一刻的请求是针对焦点小组时,通常表明该请求源自营销部门。如果营销人员认为随着发布日期的临近,网站正朝着错误的方向发展,他们可能会觉得避免潜在灾难的唯一希望就是求助于更高的权威:市场研究。他们最了解的研究类型之一是焦点小组。我经常必须非常努力地让客户明白他们需要的是可用性测试,而不是焦点小组 - 如此频繁,以至于我最终制作了一个简短的动画视频来说明它有多么困难(someslightlyirregular.com/2011/08 /你说土豆)。
When the last-minute request is for a focus group, it’s usually a sign that the request originated in Marketing. If the Marketing people feel that the site is headed in the wrong direction as the launch date approaches, they may feel that their only hope of averting potential disaster is to appeal to a higher authority: market research. And one of the types of research they know best is focus groups. I’ve often had to work very hard to make clients understand that what they need is usability testing, not focus groups—so often that I finally made a short animated video about just how hard it can be (someslightlyirregular.com/2011/08/you-say-potato).
简而言之,差异如下:
Here’s the difference in a nutshell:
在焦点小组中,一小群人(通常 5 到 10 人)围坐在桌子旁讨论一些事情,例如他们对产品的看法、他们过去使用产品的经历或他们对新概念的反应。焦点小组有助于快速了解用户对事物的感受和意见。
In a focus group, a small group of people (usually 5 to 10) sit around a table and talk about things, like their opinions about products, their past experiences with them, or their reactions to new concepts. Focus groups are good for quickly getting a sampling of users’ feelings and opinions about things.
可用性测试是指一次观察一个人尝试使用某些东西(无论是网站、原型还是新设计的一些草图)来执行典型任务,以便您可以检测并修复使他们感到困惑或沮丧的事情。
Usability tests are about watching one person at a time try to use something (whether it’s a Web site, a prototype, or some sketches of a new design) to do typical tasks so you can detect and fix the things that confuse or frustrate them.
主要区别在于,在可用性测试中,您会看到人们实际使用东西,而不是仅仅听他们谈论它们。
The main difference is that in usability tests, you watch people actually use things, instead of just listening to them talk about them.
焦点小组可以很好地确定您的受众抽象地想要什么、需要什么和喜欢什么。它们有助于测试您网站背后的想法是否有意义以及您的价值主张是否有吸引力,可以详细了解人们目前如何解决您的网站将帮助他们解决的问题,并了解他们对您和您的竞争对手的看法。
Focus groups can be great for determining what your audience wants, needs, and likes—in the abstract. They’re good for testing whether the idea behind your site makes sense and your value proposition is attractive, to learn more about how people currently solve the problems your site will help them with, and to find out how they feel about you and your competitors.
但它们不利于了解您的网站是否有效以及如何改进它。
But they’re not good for learning about whether your site works and how to improve it.
您从焦点小组中学到的东西(例如您是否正在构建正确的产品)是您在开始设计或构建任何东西之前应该了解的事情,因此焦点小组最好在项目的规划阶段使用。另一方面,可用性测试应该贯穿整个过程。
The kinds of things you learn from focus groups—like whether you’re building the right product—are things you should know before you begin designing or building anything, so focus groups are best used in the planning stages of a project. Usability tests, on the other hand, should be used through the entire process.
以下是我对可用性测试了解的主要内容:
Here are the main things I know about usability tests:
如果您想要一个出色的网站,则必须进行测试。即使您在某个网站上工作了几周,您也无法再以新鲜的方式看到它。你知道的太多了。确定它是否真的有效的唯一方法是观察其他人尝试使用它。
If you want a great site, you’ve got to test. After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore. You know too much. The only way to find out if it really works is to watch other people try to use it.
测试提醒您,并非每个人都以您的方式思考、了解您所知道的内容并以您的方式使用网络。
Testing reminds you that not everyone thinks the way you do, knows what you know, and uses the Web the way you do.
我曾经说过,思考测试的最佳方式是,它就像旅行:一种拓宽的体验。它提醒你,人与人之间是多么不同,又是多么相同,并为你提供看待事物的全新视角。1
I used to say that the best way to think about testing is that it’s like travel: a broadening experience. It reminds you how different—and the same—people are and gives you a fresh perspective on things.1
1 正如精益创业人士所说,它让你走出大楼。
1 As the Lean Startup folks would say, it gets you out of the building.
但我终于意识到,测试实际上更像是有来自外地的朋友来访。当你和他们一起游览当地的旅游景点时,你不可避免地会看到家乡的一些你通常不会注意到的东西,因为你已经习惯了它们。与此同时,你意识到很多你认为理所当然的事情并不是每个人都显而易见的。
But I finally realized that testing is really more like having friends visiting from out of town. Inevitably, as you make the rounds of the local tourist sites with them, you see things about your hometown that you usually don’t notice because you’re so used to them. And at the same time, you realize that a lot of things that you take for granted aren’t obvious to everybody.
测试一个用户比测试一个用户好 100%。测试总是有效的,即使是使用错误的用户进行的最糟糕的测试也会向您展示可以采取的重要措施来改进您的网站。
Testing one user is 100 percent better than testing none. Testing always works, and even the worst test with the wrong user will show you important things you can do to improve your site.
当我教授研讨会时,我总是在一开始就进行现场可用性测试,以便人们可以看到它很容易做到,并且总是能产生有价值的见解。
When I teach workshops, I make a point of always doing a live usability test at the beginning so that people can see that it’s very easy to do and it always produces valuable insights.
我要求一名志愿者尝试在属于其他与会者之一的网站上执行任务。这些测试持续不到十五分钟,但在这段时间内,接受测试的站点的人员通常会写下几页笔记。他们总是询问是否可以将测试录音带回家给他们的团队看。(有人告诉我,他的团队看到这段录音后,对网站进行了一项更改,后来他们计算出这一更改节省了 10 万美元。)
I ask for a volunteer to try to perform a task on a site belonging to one of the other attendees. These tests last less than fifteen minutes, but in that time the person whose site is being tested usually scribbles several pages of notes. And they always ask if they can have the recording of the test to show to their team back home. (One person told me that after his team saw the recording, they made one change to their site which they later calculated had resulted in $100,000 in savings.)
在项目早期测试 1 个用户比在项目接近尾声时测试 50 个用户要好。大多数人认为测试是一件大事。但如果你把它变成一件大事,你就不会足够早或足够频繁地这样做来充分利用它。尽早进行简单的测试(当您仍然有时间运用从中学到的知识时)几乎总是比稍后进行复杂的测试更有价值。
Testing one user early in the project is better than testing 50 near the end. Most people assume that testing needs to be a big deal. But if you make it into a big deal, you won’t do it early enough or often enough to get the most out of it. A simple test early—while you still have time to use what you learn from it—is almost always more valuable than an elaborate test later.
关于 Web 开发的部分传统观点是,进行更改非常容易。事实是,一旦网站投入使用,对其进行更改(尤其是重大更改)通常并不那么容易。一定比例的用户会抵制几乎任何类型的更改,即使是看似简单的更改也往往会产生深远的影响。在此过程中尽早纠正的任何错误都会为您省去麻烦。
Part of the conventional wisdom about Web development is that it’s very easy to go in and make changes. The truth is, it’s often not that easy to make changes—especially major changes—to a site once it’s in use. Some percentage of users will resist almost any kind of change, and even apparently simple changes often turn out to have far-reaching effects. Any mistakes you can correct early in the process will save you trouble down the line.
可用性测试已经存在很长时间了,其基本思想非常简单:如果你想知道某件事是否足够容易使用,请观察一些人尝试使用它并记下他们在哪里遇到问题。
Usability testing has been around for a long time, and the basic idea is pretty simple: If you want to know whether something is easy enough to use, watch some people while they try to use it and note where they run into problems.
然而,一开始,可用性测试是一个非常昂贵的提议。您必须拥有一个可用性实验室,并在单向镜子和摄像机后面设有观察室,以记录用户的反应和屏幕。您必须聘请可用性专家来为您计划和促进测试。而且您必须招募大量参与者2才能获得具有统计显着性的结果。这是科学。每次注射的成本为 20,000 至 50,000 美元。这种情况并不经常发生。
In the beginning, though, usability testing was a very expensive proposition. You had to have a usability lab with an observation room behind a one-way mirror and video cameras to record the users’ reactions and the screen. You had to pay a usability professional to plan and facilitate the tests for you. And you had to recruit a lot of participants2 so you could get results that were statistically significant. It was Science. It cost $20,000 to $50,000 a shot. It didn’t happen very often.
2 我们称他们为参与者而不是“测试对象”,以表明我们不是在测试他们;我们正在测试该网站。
2 We call them participants rather than “test subjects” to make it clear that we’re not testing them; we’re testing the site.
然后在 1989 年,Jakob Nielsen 写了一篇题为“打折的可用性工程”的论文,并指出事情不必如此。您不需要可用性实验室,并且只需更少的参与者即可获得相同的结果。每轮测试的价格降至 5,000 至 10,000 美元。
Then in 1989 Jakob Nielsen wrote a paper titled “Usability Engineering at a Discount” and pointed out that it didn’t have to be that way. You didn’t need a usability lab, and you could achieve the same results with far fewer participants. The price tag dropped to $5,000 to $10,000 per round of testing.
折扣可用性测试的想法是向前迈出的一大步。唯一的问题是每个网站(和应用程序)都需要测试,而 5,000 到 10,000 美元仍然是一大笔钱,所以这种情况发生得不够频繁。
The idea of discount usability testing was a huge step forward. The only problem is that every Web site (and app) needs testing and $5,000 to $10,000 is still a lot of money, so it doesn’t happen nearly often enough.
在本章中我将向您推荐的是更简单(而且便宜得多)的东西:自己动手进行可用性测试。
What I’m going to commend to you in this chapter is something even simpler (and a lot less expensive): Do-it-yourself usability testing.
我将解释当您没有时间和金钱时如何进行自己的测试。
I’m going to explain how you can do your own testing when you have no time and no money.
不要误会我的意思:如果您有能力聘请专业人士来进行测试,那就去做吧。他们很有可能比你做得更好。但如果你雇不到人,那就自己做吧。
Don’t get me wrong: If you can afford to hire a professional to do your testing, do it. Odds are they’ll be able to do a better job than you can. But if you can’t hire someone, do it yourself.
我非常相信这种测试的价值,因此我写了一本关于如何进行测试的完整(短)书。它被称为“火箭手术变得简单:查找和解决可用性问题的DIY指南”。
I believe in the value of this kind of testing so much that I wrote an entire (short) book about how to do it. It’s called Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems.
它更详细地涵盖了本章中的主题,并为您提供了整个过程的分步指导。
It covers the topics in this chapter in a lot more detail and gives you step-by-step directions for the whole process.
我认为每个 Web 开发团队都应该每月花一个上午进行可用性测试。
I think every Web development team should spend one morning a month doing usability testing.
在一个早上,您可以测试三个用户,然后在午餐时进行汇报。就是这样。当您离开汇报会时,团队将在下一轮测试之前决定您要解决的问题,并且您将完成本月的测试。3
In a morning, you can test three users, then debrief over lunch. That’s it. When you leave the debriefing, the team will have decided what you’re going to fix before the next round of testing, and you’ll be done with testing for the month.3
3 如果您正在进行敏捷开发,您将更频繁地进行测试,但原则仍然是相同的。例如,您可能每两周对两名用户进行测试。制定固定的时间表并坚持下去很重要。
3 If you’re doing Agile development, you’ll be doing testing more frequently, but the principles are still the same. For instance, you might be testing with two users every two weeks. Creating a fixed schedule and sticking to it is what’s important.
为什么每个月都有一个早晨?
Why a morning a month?
它保持简单,所以你会继续这样做。每个月的一个上午大约是大多数团队可以花在测试上的时间。如果它太复杂或太耗时,当事情变得忙碌时,你很可能不会抽出时间来处理它。
It keeps it simple so you’ll keep doing it. A morning a month is about as much time as most teams can afford to spend doing testing. If it’s too complicated or time-consuming, it’s much more likely that you won’t make time for it when things get busy.
它为您提供您需要的东西。通过观察三位参与者,您将发现足够多的问题,让您在下个月忙于解决问题。
It gives you what you need. Watching three participants, you’ll identify enough problems to keep you busy fixing things for the next month.
它使您无需决定何时进行测试。您应该选择每月的一天(例如第三个星期四)并将其作为指定的测试日。
It frees you from deciding when to test. You should pick a day of the month—like the third Thursday—and make that your designated testing day.
这比将测试计划基于里程碑和可交付成果(“我们将在测试版准备好发布时进行测试”)要好得多,因为计划经常会出现延误,而测试也会随之出现延误。别担心,每个月总会有一些东西可以测试。
This is much better than basing your test schedule on milestones and deliverables (“We’ll test when the beta’s ready to release”) because schedules often slip and testing slips along with them. Don’t worry, there will always be something you can test each month.
这使得人们更有可能参加。按照可预测的时间表在一个早上完成这一切,大大增加了团队成员抽出时间来观看至少部分会议的机会,这是非常可取的。
It makes it more likely that people will attend. Doing it all in a morning on a predictable schedule greatly increases the chances that team members will make time to come and watch at least some of the sessions, which is highly desirable.
我认为每轮 DIY 测试的理想参与者人数是三人。
I think the ideal number of participants for each round of do-it-yourself testing is three.
有些人会抱怨三个还不够。他们会说样本太小,无法证明任何事情,也无法揭示所有问题。这两者都是正确的,但它们并不重要,原因如下:
Some people will complain that three aren’t enough. They’ll say that it’s too small a sample to prove anything and that it won’t uncover all of the problems. Both of these are true but they just don’t matter, and here’s why:
这种测试的目的不是为了证明任何事情。证明事情需要定量测试,需要大样本量、明确定义且严格遵循的测试协议以及大量数据收集和分析。
The purpose of this kind of testing isn’t to prove anything. Proving things requires quantitative testing, with a large sample size, a clearly defined and rigorously followed test protocol, and lots of data gathering and analysis.
自己动手测试是一种定性方法,其目的是通过识别和修复可用性问题来改进您正在构建的内容。这个过程一点也不严格:你给他们布置任务,你观察,然后你学习。结果是可操作的见解,而不是证据。
Do-it-yourself tests are a qualitative method whose purpose is to improve what you’re building by identifying and fixing usability problems. The process isn’t rigorous at all: You give them tasks to do, you observe, and you learn. The result is actionable insights, not proof.
您不需要找到所有问题。事实上,你永远不会在你测试的任何东西中发现所有问题。如果你这样做也无济于事,因为这个事实:
You don’t need to find all of the problems. In fact, you’ll never find all of the problems in anything you test. And it wouldn’t help if you did, because of this fact:
半天发现的问题比一个月解决的问题还要多。
You can find more problems in half a day than you can fix in a month.
您总是会发现比您有资源可以解决的问题更多的问题,因此首先专注于解决最严重的问题非常重要。三个用户很可能会遇到与您正在测试的任务相关的许多最重要的问题。
You’ll always find more problems than you have the resources to fix, so it’s very important that you focus on fixing the most serious ones first. And three users are very likely to encounter many of the most significant problems related to the tasks that you’re testing.
只需几个测试参与者即可发现问题
Problems you can find with just a few test participants
此外,您每个月还要再进行一轮。进行更多轮的测试比从每一轮中榨取一切要重要得多。
Also, you’re going to be doing another round each month. It’s much more important to do more rounds of testing than to wring everything you can out of each round.
当人们决定进行测试时,他们通常会花费大量时间试图招募他们认为能够准确反映目标受众的用户,例如,“年龄在 25 至 30 岁之间、拥有一到三年计算机经验、最近买了很贵的鞋子。”
When people decide to test, they often spend a lot of time trying to recruit users who they think will precisely reflect their target audience—for instance, “male accountants between the ages of 25 and 30 with one to three years of computer experience who have recently purchased expensive shoes.”
与将使用您网站的人一样的参与者进行测试是件好事,但事实是,招募来自目标受众的人员并不像看起来那么重要。对于许多网站,您几乎可以与任何人一起进行大量测试。如果您刚刚开始进行测试,您的网站可能存在许多可用性缺陷,这些缺陷几乎会给您招募的所有人带来真正的问题。
It’s good to do your testing with participants who are like the people who will use your site, but the truth is that recruiting people who are from your target audience isn’t quite as important as it may seem. For many sites, you can do a lot of your testing with almost anybody. And if you’re just starting to do testing, your site probably has a number of usability flaws that will cause real problems for almost anyone you recruit.
招聘符合狭隘特征的人通常需要更多的工作(找到他们)并且通常需要更多的钱(作为他们的津贴)。如果您有足够的时间花在招聘上,或者您有能力聘请某人为您做这件事,那么请务必按照您的意愿具体说明。但如果找到理想的用户意味着您需要进行更少的测试,我建议采用不同的方法:
Recruiting people who fit a narrow profile usually requires more work (to find them) and often more money (for their stipend). If you have plenty of time to spend on recruiting or you can afford to hire someone to do it for you, then by all means be as specific as you want. But if finding the ideal users means you’re going to do less testing, I recommend a different approach:
宽松招聘并按曲线评分
RECRUIT LOOSELY AND GRADE ON A CURVE
换句话说,尝试找到能够反映您的受众的用户,但不要为此纠结。相反,放宽您的要求,然后考虑参与者和观众之间的差异。当有人遇到问题时,问问自己“我们的用户会遇到这个问题吗?或者这只是因为他们不知道我们的用户知道什么而导致的问题?”
In other words, try to find users who reflect your audience, but don’t get hung up about it. Instead, loosen up your requirements and then make allowances for the differences between your participants and your audience. When somebody has a problem, ask yourself “Would our users have that problem, or was it only a problem because they didn’t know what our users know?”
如果使用您的网站需要特定的领域知识(例如,针对资金管理专业人员的货币兑换网站),那么您需要招募一些具有该知识的人员。但他们不必都拥有它,因为许多最严重的可用性问题是任何人都会遇到的事情。
If using your site requires specific domain knowledge (e.g., a currency exchange site for money management professionals), then you’ll need to recruit some people with that knowledge. But they don’t all have to have it, since many of the most serious usability problems are things that anybody will encounter.
事实上,我赞成始终使用一些不来自目标受众的参与者,原因如下:
In fact, I’m in favor of always using some participants who aren’t from your target audience, for three reasons:
将网站设计为只有目标受众才能使用通常不是一个好主意。领域知识是一件棘手的事情,如果您使用您认为所有资金经理都会理解的术语为资金经理设计一个网站,那么您会发现一个小但并非微不足道的知识他们中的许多人不知道你在说什么。在大多数情况下,无论如何,您都需要支持新手和专家。
It’s usually not a good idea to design a site so that only your target audience can use it. Domain knowledge is a tricky thing, and if you design a site for money managers using terminology that you think all money managers will understand, what you’ll discover is that a small but not insignificant number of them won’t know what you’re talking about. And in most cases, you need to be supporting novices as well as experts anyway.
我们都是初学者。与专家打交道时,你经常会发现有人应付不过来——只是水平较高。
We’re all beginners under the skin. Scratch an expert and you’ll often find someone who’s muddling through—just at a higher level.
专家很少会因为对初学者来说足够清楚的东西而受到侮辱。每个人都欣赏清晰度。(也就是说,真正的清晰,而不仅仅是“简化”的东西。)如果“几乎任何人”都可以使用它,那么您的专家也将能够使用它。
Experts are rarely insulted by something that is clear enough for beginners. Everybody appreciates clarity. (True clarity, that is, and not just something that’s been “dumbed down.”) If “almost anybody” can use it, your experts will be able to use it, too.
有很多地方和方法可以招募测试参与者,例如用户组、贸易展览、Craigslist、Facebook、Twitter、客户论坛、网站上的弹出窗口,甚至询问朋友和邻居。
There are many places and ways to recruit test participants, like user groups, trade shows, Craigslist, Facebook, Twitter, customer forums, a pop-up on your site, or even asking friends and neighbors.
如果您打算自己进行招募,我建议您下载 Nielsen Norman Group 的免费 147 页报告《如何招募可用性研究参与者》。4您不必阅读全部内容,但它是一个极好的建议来源。
If you’re going to do your own recruiting, I recommend that you download the Nielsen Norman Group’s free 147-page report How to Recruit Participants for Usability Studies.4 You don’t have to read it all, but it’s an excellent source of advice.
4 ...位于nngroup.com/reports/tips/recruiting。这是 2003 年的数据,但如果考虑到美元金额 20% 的通货膨胀,这一切仍然有效。我有没有提到它是免费的?
4 ...at nngroup.com/reports/tips/recruiting. It’s from 2003, but if you factor in 20% inflation for the dollar amounts, it’s all still valid. And did I mention that it’s free?
一小时测试课程的典型参与者奖励范围从“普通”网络用户的 50 至 100 美元到忙碌的高薪专业人士(例如心脏病专家)的数百美元不等。
Typical participant incentives for a one-hour test session range from $50 to $100 for “average” Web users to several hundred dollars for busy, highly paid professionals, like cardiologists for instance.
我喜欢为人们提供比现行价格稍高的价格,因为这清楚地表明我重视他们的时间并提高了他们出现的机会。请记住,即使会议只有一个小时,人们通常还必须再花一个小时旅行。
I like to offer people a little more than the going rate, since it makes it clear that I value their time and improves the chances that they’ll show up. Remember that even if the session is only an hour, people usually have to spend another hour traveling.
要进行测试,您需要一个不会被打扰的安静空间(通常是办公室或会议室),并配有一张桌子或书桌和两把椅子。您需要一台可以访问互联网的计算机、鼠标、键盘和麦克风。
To conduct the test, you need a quiet space where you won’t be interrupted (usually either an office or a conference room) with a table or desk and two chairs. And you’ll need a computer with Internet access, a mouse, a keyboard, and a microphone.
您将使用屏幕共享软件(如 GoToMeeting 或 WebEx)来允许团队成员、利益相关者和任何有兴趣从另一个房间观察测试的其他人。
You’ll be using screen sharing software (like GoToMeeting or WebEx) to allow the team members, stakeholders, and anyone else who’s interested to observe the tests from another room.
您还应该运行屏幕录制软件(例如 Techsmith 的 Camtasia)来记录屏幕上发生的情况以及主持人和参与者所说的话。您可能永远不会参考它,但如果您想检查某些内容或使用一些简短的剪辑作为演示的一部分,那么最好有它。
You should also run screen recording software (like Camtasia from Techsmith) to capture a record of what happens on the screen and what the facilitator and the participant say. You may never refer to it, but it’s good to have in case you want to check something or use a few brief clips as part of a presentation.
与参与者坐在一起并引导他们完成测试的人称为协调员。几乎任何人都可以促进可用性测试;真正需要的只是尝试的勇气,经过一点练习,大多数人都可以做得很好。
The person who sits with the participant and leads them through the test is called the facilitator. Almost anyone can facilitate a usability test; all it really takes is the courage to try it, and with a little practice, most people can get quite good at it.
我假设您将亲自协助测试,但如果您不这样做,请尝试选择一个有耐心、冷静、有同理心且善于倾听的人。不要选择你认为“绝对不善于交际”或“办公室怪人”的人。
I’m assuming that you’re going to facilitate the tests yourself, but if you’re not, try to choose someone who tends to be patient, calm, empathetic, and a good listener. Don’t choose someone whom you would describe as “definitely not a people person” or “the office crank.”
除了让参与者感到舒适并专注于完成任务之外,辅导员的主要工作是鼓励他们尽可能多地大声思考。观察参与者的行为和听到他们在做事时的想法相结合,使观察者能够通过其他人的眼睛看到该网站,并理解为什么一些对他们来说显而易见的事情对用户来说是令人困惑或沮丧的。
Other than keeping the participants comfortable and focused on doing the tasks, the facilitator’s main job is to encourage them to think out loud as much as possible. The combination of watching what the participants do and hearing what they’re thinking while they do it is what enables the observers to see the site through someone else’s eyes and understand why some things that are obvious to them are confusing or frustrating to users.
进行可用性测试最有价值的事情之一是它对观察者的影响。对于许多人来说,这是一种变革性的体验,极大地改变了他们对用户的看法:他们突然“意识到”用户并不都像他们一样。
One of the most valuable things about doing usability testing is the effect it can have on the observers. For many people, it’s a transformative experience that dramatically changes the way they think about users: They suddenly “get it” that users aren’t all like them.
您应该尽力鼓励每个人(团队成员、利益相关者、经理,甚至高管)来观看测试会议。事实上,如果你有钱进行测试,我建议你用它来购买最好的零食来吸引人们。(巧克力牛角面包似乎效果特别好。)
You should try to do whatever you can to encourage everyone—team members, stakeholders, managers, and even executives—to come and watch the test sessions. In fact, if you have any money for testing, I recommend using it to buy the best snacks you can to lure people in. (Chocolate croissants seem to work particularly well.)
您需要一个观察室(通常是会议室)、一台可以访问互联网和屏幕共享软件的计算机、一台大屏幕显示器或投影仪以及一对外部扬声器,以便每个人都可以看到和听到测试室中发生的情况。
You’ll need an observation room (usually a conference room), a computer with Internet access and screen sharing software, and a large screen monitor or projector and a pair of external speakers so everyone can see and hear what’s happening in the test room.
在每次测试结束后的休息期间,观察者需要写下他们在该测试期间注意到的三个最严重的可用性问题,以便他们可以在汇报中分享它们。您可以从我的网站下载我为此目的创建的表格。他们可以根据需要记下尽可能多的笔记,但重要的是他们要列出这个简短的清单,因为正如您将看到的,汇报的目的是确定最严重的问题,以便首先解决它们。
During the break after each test session, observers need to write down the three most serious usability problems they noticed during that session so they can share them in the debriefing. You can download a form I created for this purpose from my Web site. They can take as many notes as they want, but it’s important that they make this short list because, as you’ll see, the purpose of the debriefing is to identify the most serious problems so they get fixed first.
正如任何可用性专业人士都会告诉您的那样,尽早开始测试并在整个开发过程中保持测试非常重要。
As any usability professional will tell you, it’s important to start testing as early as possible and to keep testing through the entire development process.
事实上,任何时候开始都不会太早。例如,即使在开始设计网站之前,最好对竞争网站进行测试。他们可能是真正的竞争对手,也可能只是与您计划使用的风格、组织或功能相同的网站。引入三名参与者并观看他们尝试在一两个竞争性网站上执行一些典型任务,您将了解很多关于什么有效和无效的信息,而无需设计或构建任何东西。
In fact, it’s never too early to start. Even before you begin designing your site, for instance, it’s a good idea to do a test of competitive sites. They may be actual competitors, or they may just be sites that have the same style, organization, or features that you plan on using. Bring in three participants and watch them try to do some typical tasks on one or two competitive sites and you’ll learn a lot about what works and doesn’t work without having to design or build anything.
如果您要重新设计现有网站,您还需要在开始之前对其进行测试,这样您就会知道哪些内容不起作用(需要更改)以及哪些内容有效(这样您就不会破坏它)。
If you’re redesigning an existing site, you’ll also want to test it before you start, so you’ll know what’s not working (and needs to be changed) and what is working (so you don’t break it).
然后在整个项目中,继续测试团队制作的所有内容,从第一个粗略草图开始,继续线框、页面组合、原型,最后是实际页面。
Then throughout the project, continue to test everything the team produces, beginning with your first rough sketches and continuing on with wireframes, page comps, prototypes, and finally actual pages.
对于每一轮测试,您都需要提出任务:参与者将尝试做的事情。
For each round of testing, you need to come up with tasks: the things the participants will try to do.
您在给定回合中测试的任务部分取决于您可以测试的任务。例如,如果你只有一个粗略的草图,那么任务可能只是要求他们看一下并告诉你他们的想法。
The tasks you test in a given round will depend partly on what you have available to test. If all you have is a rough sketch, for instance, the task may consist of simply asking them to look at it and tell you what they think it is.
不过,如果您要向他们展示的不仅仅是一个草图,请首先列出人们需要能够完成您正在测试的任何任务的任务列表。例如,如果您正在测试登录流程的原型,则任务可能是
If you have more than a sketch to show them, though, start by making a list of the tasks people need to be able to do with whatever you’re testing. For instance, if you’re testing a prototype of a login process, the tasks might be
创建一个帐户
Create an account
使用现有的用户名和密码登录
Log in using an existing username and password
找回忘记的密码
Retrieve a forgotten password
找回忘记的用户名
Retrieve a forgotten username
更改安全问题的答案
Change answer to a security question
选择足够的任务来填补可用时间(在一小时的测试中大约为 35 分钟),请记住,有些人会比您预期更快地完成任务。
Choose enough tasks to fill the available time (about 35 minutes in a one-hour test), keeping in mind that some people will finish them faster than you expect.
然后仔细地描述每项任务,这样参与者就会准确地理解你希望他们做什么。包括他们需要但没有的任何信息,例如登录信息(如果您让他们使用模拟帐户)。例如:
Then word each task carefully, so the participants will understand exactly what you want them to do. Include any information that they’ll need but won’t have, like login information if you’re having them use a demo account. For example:
您有一个现有帐户,用户名为 delphi21,密码为 Correcthorsebatterystaple。您总是在每个网站上对安全问题使用相同的答案,而您只是发现这是一个坏主意。更改此帐户的答案。
You have an existing account with the username delphi21 and the password correcthorsebatterystaple. You’ve always used the same answers to security questions on every site, and you just read that this is a bad idea. Change your answer for this account.
如果允许参与者选择任务的一些细节,通常可以获得更具启发性的结果。例如,说“找一本你想买的书,或者一本你最近买的书”比说“找一本价格低于 14 美元的烹饪书”要好得多。它增加了他们的情感投入,并允许他们更多地利用他们对内容的个人知识。
You can often get more revealing results if you allow the participants to choose some of the details of the task. It’s much better, for instance, to say “Find a book you want to buy, or a book you bought recently” than “Find a cookbook for under $14.” It increases their emotional investment and allows them to use more of their personal knowledge of the content.
您可以在Rocketsurgerymadeeasy.com下载我用于测试网站的脚本(或用于测试应用程序的稍微不同的版本)。我建议你完全按照书面内容阅读你的“台词”,因为措辞是经过精心挑选的。
You can download the script that I use for testing Web sites (or the slightly different version for testing apps) at rocketsurgerymadeeasy.com. I recommend that you read your “lines” exactly as written, since the wording has been carefully chosen.
典型的一小时测试将被分解为如下:
A typical one-hour test would be broken down something like this:
欢迎(4 分钟)。您首先要解释测试如何进行,以便参与者知道会发生什么。
Welcome (4 minutes). You begin by explaining how the test will work so the participant knows what to expect.
问题(2 分钟)。接下来,您向参与者询问一些有关他们自己的问题。这有助于让他们放松下来,并让您了解他们对计算机和网络的精通程度。
The questions (2 minutes). Next you ask the participant a few questions about themselves. This helps put them at ease and gives you an idea of how computer-savvy and Web-savvy they are.
主页浏览(3 分钟)。然后,您打开正在测试的网站的主页,并要求参与者环顾四周并告诉您他们对此有何看法。这将使您了解了解您的主页有多么容易以及参与者对您的域的了解程度。
The Home page tour (3 minutes). Then you open the Home page of the site you’re testing and ask the participant to look around and tell you what they make of it. This will give you an idea of how easy it is to understand your Home page and how much the participant already knows your domain.
任务(35 分钟)。这是测试的核心:观察参与者尝试执行一系列任务(或者在某些情况下,仅执行一项长任务)。同样,你的工作是确保参与者专注于任务并不断大声思考。
The tasks (35 minutes). This is the heart of the test: watching the participant try to perform a series of tasks (or in some cases, just one long task). Again, your job is to make sure the participant stays focused on the tasks and keeps thinking aloud.
如果参与者停止说出他们在想什么,请通过说(等等)来提示他们:“你在想什么?” (为了多样化,你也可以说“你在看什么?”和“你现在在做什么?”)
If the participant stops saying what they’re thinking, prompt them by saying—wait for it—“What are you thinking?” (For variety, you can also say things like “What are you looking at?” and “What are you doing now?”)
在测试的这一部分中,至关重要的是让他们独立工作并且不要做或说任何影响他们的事情。不要问他们引导性问题,也不要给他们任何线索或帮助,除非他们陷入困境或极度沮丧。如果他们寻求帮助,只需说“如果我不在这里,你会怎么做?”
During this part of the test, it’s crucial that you let them work on their own and don’t do or say anything to influence them. Don’t ask them leading questions, and don’t give them any clues or assistance unless they’re hopelessly stuck or extremely frustrated. If they ask for help, just say something like “What would you do if I wasn’t here?”
探测(5 分钟)。完成任务后,您可以向参与者询问测试期间发生的任何事情以及观察室中的人员希望您提出的任何问题。
Probing (5 minutes). After the tasks, you can ask the participant questions about anything that happened during the test and any questions that the people in the observation room would like you to ask.
总结(5 分钟)。最后,你感谢他们的帮助,付钱给他们,然后送他们到门口。
Wrapping up (5 minutes). Finally, you thank them for their help, pay them, and show them to the door.
这是一个典型但虚构的测试会话的带注释的摘录。参与者的名字叫Janice,大约25岁。
Here’s an annotated excerpt from a typical—but imaginary—test session. The participant’s name is Janice, and she’s about 25 years old.
这就是全部内容了。
That’s really all there is to it.
如果您想查看更完整的测试,可以在我的网站上找到一个二十分钟的视频。只需访问Rocketsurgerymadeeasy.com并点击“演示测试视频”即可。
If you’d like to see a more complete test, you’ll find a twenty-minute video on my site. Just go to rocketsurgerymadeeasy.com and click on “Demo test video.”
以下是您最常遇到的一些问题类型:
Here are some of the types of problems you’re going to see most often:
用户不清楚这个概念。他们就是不明白。他们查看网站或页面,要么不知道该怎么理解,要么认为自己知道,但他们错了。
Users are unclear on the concept. They just don’t get it. They look at the site or a page and either they don’t know what to make of it or they think they do but they’re wrong.
他们要找的词不存在。这通常意味着您未能预见到他们会寻找什么,或者您用来描述事物的词语不是他们会使用的词语。
The words they’re looking for aren’t there. This usually means that either you failed to anticipate what they’d be looking for or the words you’re using to describe things aren’t the words they’d use.
发生的事情太多了。有时他们要找的东西就在页面上,但他们只是看不到。在这种情况下,您需要减少页面上的整体噪音,或者调高他们需要看到的内容的音量,以便它们更多地“弹出”视觉层次结构。
There’s too much going on. Sometimes what they’re looking for is right there on the page, but they’re just not seeing it. In this case, you need to either reduce the overall noise on the page or turn up the volume on the things they need to see so they “pop” out of the visual hierarchy more.
每轮测试之后,您应该尽快腾出时间让团队分享他们的观察结果,并决定要解决哪些问题以及您将采取哪些措施来解决这些问题。
After each round of tests, you should make time as soon as possible for the team to share their observations and decide which problems to fix and what you’re going to do to fix them.
我建议您在完成测试后立即在午餐时进行汇报,同时观察员对一切都还记忆犹新。(从昂贵的披萨店订购真正美味的披萨以鼓励出席。)
I recommend that you debrief over lunch right after you do the tests, while everything is still fresh in the observers’ minds. (Order the really good pizza from the expensive pizza place to encourage attendance.)
每当您进行测试时,您几乎总是会发现一些严重的可用性问题。不幸的是,它们并不总是能够得到修复。例如,人们常常会说:“是的,这是一个真正的问题。但这些功能很快就会改变,在那之前我们可以忍受它。” 或者,当他们面临是解决一个严重问题还是解决许多简单问题之间的选择时,他们会选择容易实现的目标。
Whenever you test, you’re almost always going to find some serious usability problems. Unfortunately, they aren’t always the ones that get fixed. Often, for instance, people will say, “Yes, that’s a real problem. But that functionality is all going to change soon, and we can live with it until then.” Or faced with a choice between trying to fix one serious problem or a lot of simple problems, they opt for the low-hanging fruit.
这就是为什么即使在资金充足的大型网站上也经常会遇到严重的可用性问题的原因之一,这也是为什么我在《火箭手术》中的格言之一是
This is one reason why you can so often run into serious usability problems even on large, well-funded Web sites, and it’s why one of my maxims in Rocket Surgery is
首先集中精力解决最严重的问题
FOCUS RUTHLESSLY ON FIXING THE MOST SERIOUS PROBLEMS FIRST
这是我喜欢用来确保这种情况发生的方法,但您可以采用适合您的团队的任何方式:
Here’s the method I like to use to make sure this happens, but you can do it any way that works for your team:
列一个集体清单。在房间里走动,让每个人都有机会说出他们认为他们观察到的三个最严重的问题(他们写下的九个问题;每个会议三个)。将它们写在白板或画架垫纸上。通常,很多人会对其中一些人说“我也是”,您可以通过添加复选标记来跟踪这一情况。
Make a collective list. Go around the room giving everyone a chance to say what they thought were the three most serious problems they observed (of the nine they wrote down; three for each session). Write them down on a whiteboard or sheets of easel pad paper. Typically, a lot of people will say “Me, too” to some of them, which you can keep track of by adding checkmarks.
目前还没有讨论;你只是列出了问题。他们必须被观察到的问题;在一次测试期间实际发生的事情。
There’s no discussion at this point; you’re just listing the problems. And they have to be observed problems; things that actually happened during one of the test sessions.
选择十个最严重的问题。您可以进行非正式投票,但通常可以从获得最多复选标记的投票开始。
Choose the ten most serious problems. You can do informal voting, but you can usually start with the ones that got the most checkmarks.
评价他们。将它们从 1 到 10 编号,1 表示最差。然后将它们复制到一个新列表中,将最差的放在顶部,并在它们之间留出一些空间。
Rate them. Number them from 1 to 10, 1 being the worst. Then copy them to a new list with the worst at the top, leaving some room between them.
创建一个有序列表。从顶部开始,写下一个粗略的想法,说明下个月将如何修复每个问题、由谁来完成以及所需的资源。
Create an ordered list. Starting at the top, write down a rough idea of how you’re going to fix each one in the next month, who’s going to do it, and any resources it will require.
您不必完美或彻底地解决每个问题。你只需要做一些事情——通常只是一个调整——就能把它从“严重问题”的范畴中剔除出来。
You don’t have to fix each problem perfectly or completely. You just have to do something—often just a tweak—that will take it out of the category of “serious problem.”
当您觉得您已经分配了下个月可用的所有时间和资源来解决可用性问题时,请停止。你已经得到了你想要的东西。该小组现已决定需要修复的内容并承诺修复它。
When you feel like you’ve allocated all of the time and resources you have available in the next month for fixing usability problems, STOP. You’ve got what you came for. The group has now decided what needs to be fixed and made a commitment to fixing it.
Here are some tips about deciding what to fix—and what not to.
单独列出一些容易实现的目标。您还可以列出一些问题不严重但很容易修复的问题。我所说的“非常容易”是指一个人可以在不到一小时内解决的问题,而无需获得任何不在汇报中的人的许可。
Keep a separate list of low-hanging fruit. You can also keep a list of things that aren’t serious problems but are very easy to fix. And by very easy, I mean things that one person can fix in less than an hour, without getting permission from anyone who isn’t at the debriefing.
抵制添加东西的冲动。当在测试中明显发现用户没有得到某些内容时,团队的第一反应通常是添加一些内容,例如解释或一些说明。但很多时候,正确的解决方案是拿走一些(或一些)模糊含义的东西,而不是添加另一种干扰。
Resist the impulse to add things. When it’s obvious in testing that users aren’t getting something, the team’s first reaction is usually to add something, like an explanation or some instructions. But very often the right solution is to take something (or some things) away that are obscuring the meaning, rather than adding yet another distraction.
对“新功能”请求持保留态度。参与者经常会说:“如果它能做某件事,我会更喜欢它。” 对这些新功能的请求保持怀疑是值得的。我发现,如果你要求他们描述该功能如何工作——在测试结束时的探索时间内——结果几乎总是结果是,当他们完成描述时,他们会说“但是现在我想到了它,我可能不会使用它。” 参与者不是设计师。他们偶尔可能会想出一个好主意,但当他们这样做时,你会立即知道,因为你的第一个想法将是“为什么我们没有想到这一点?!”
Take “new feature” requests with a grain of salt. Participants will often say, “I’d like it better if it could do x.” It pays to be suspicious of these requests for new features. I find that if you ask them to describe how that feature would work—during the probing time at the end of the test—it almost always turns out that by the time they finish describing it they say something like “But now that I think of it, I probably wouldn’t use that.” Participants aren’t designers. They may occasionally come up with a great idea, but when they do you’ll know it immediately, because your first thought will be “Why didn’t we think of that?!”
忽略“皮划艇”问题。在任何测试中,您可能会看到几种情况,用户会暂时误入歧途,但在没有任何帮助的情况下几乎立即回到正轨。这有点像在皮划艇上翻滚;只要皮划艇能够足够快地恢复原状,这就是所谓乐趣的一部分。用篮球术语来说,没有伤害,就没有犯规。
Ignore “kayak” problems. In any test, you’re likely to see several cases where users will go astray momentarily but manage to get back on track almost immediately without any help. It’s kind of like rolling over in a kayak; as long as the kayak rights itself quickly enough, it’s all part of the so-called fun. In basketball terms, no harm, no foul.
只要 (a) 每个遇到问题的人都注意到他们不再快速朝着正确的方向前进,并且 (b) 他们能够在没有帮助的情况下恢复,并且 (c) 这似乎并没有让他们感到困扰,那么你可以忽略这个问题。一般来说,如果用户对在哪里找到东西的第二次猜测总是正确的,那就足够了。
As long as (a) everyone who has the problem notices that they’re no longer headed in the right direction quickly, and (b) they manage to recover without help, and (c) it doesn’t seem to faze them, you can ignore the problem. In general, if the user’s second guess about where to find things is always right, that’s good enough.
以下是另外两种具有明显优势的测试方法:
Here are two other ways to do testing that have distinct advantages:
远程测试。此处的区别在于,参与者无需来到您的办公室,而是使用屏幕共享在自己舒适的家或办公室中进行测试。消除出差的需要可以让招聘忙碌的人变得更加容易,更重要的是,它可以将你的招聘池从“住在你办公室附近的人”扩大到“几乎任何人”。他们所需要的只是高速互联网接入和麦克风。
Remote testing. The difference here is that instead of coming to your office, participants do the test from the comfort of their own home or office, using screen sharing. Eliminating the need to travel can make it much easier to recruit busy people and, even more significantly, it expands your recruiting pool from “people who live near your office” to “almost anyone.” All they need is high-speed Internet access and a microphone.
不受监管的远程测试。UserTesting.com 等服务为人们提供了记录自己进行可用性测试的服务。您只需发送任务以及指向您的网站、原型或移动应用程序的链接即可。在一个小时内(平均),您可以观看某人在大声思考的同时完成任务的视频。5您无法与参与者实时互动,但其成本相对较低,并且几乎不需要您付出任何努力(尤其是招聘)。您所要做的就是观看视频。
Unmoderated remote testing. Services like UserTesting.com provide people who will record themselves doing a usability test. You simply send in your tasks and a link to your site, prototype, or mobile app. Within an hour (on average), you can watch a video of someone doing your tasks while thinking aloud.5 You don’t get to interact with the participant in real time, but it’s relatively inexpensive and requires almost no effort (especially recruiting) on your part. All you have to do is watch the video.
5 全面披露:我从 UserTesting.com 获得一些补偿,因为他们允许他们使用我的名字。但我这样做只是因为我一直认为他们有很棒的产品——这就是我在这里提到他们的原因。
5 Full disclosure: I receive some compensation from UserTesting.com for letting them use my name. But I only do that because I’ve always thought they have a great product—which is why I’m mentioning them here.
无论你使用什么方法,都尝试去做。我几乎可以保证,如果你这样做,你会想继续这样做。
Whatever method you use, try doing it. I can almost guarantee that if you do, you’ll want to keep doing it.
以下是一些应对您可能遇到的异议的建议:
Here are some suggestions for fending off any objections you might encounter:
不测试网站的五个最可能的原因
The Top Five Plausible Reasons for not Testing Web Sites
欢迎来到 21 世纪 — 您可能会感到轻微的眩晕感
WELCOME TO THE 21ST CENTURY — YOU MAY EXPERIENCE A SLIGHT SENSE OF VERTIGO
[shouting] PHENOMENAL COSMIC POWERS! [softly] Itty-bitty living space!
——罗宾·威廉姆斯在《阿拉丁》中饰演精灵,评论精灵生活方式的优点和缺点
—ROBIN WILLIAMS AS THE GENIE IN ALADDIN, COMMENTING ON THE UPSIDE AND DOWNSIDE OF THE GENIE LIFESTYLE
啊,智能手机。
Ahh, the smartphone.
多年来,手机逐渐变得更加智能,它们聚集在办公桌抽屉里,并相互密谋。但直到“大跃进1”,他们才终于有了意识。
Phones had been getting gradually smarter for years, gathering in desk drawers and plotting amongst themselves. But it wasn’t until the Great Leap Forward1 that they finally achieved consciousness.
1 iPhone 推出,2007 年 6 月。
1 Introduction of the iPhone June 2007.
就我而言,我很高兴欢迎我们那些浪费时间的小霸主。我知道曾经有一段时间我的口袋里没有一台功能强大、可以上网的触摸屏电脑,但我越来越难以记住当时的生活是什么样的。
I, for one, was glad to welcome our tiny, time-wasting overlords. I know there was a time when I didn’t have a powerful touch screen computer with Internet access in my pocket, but it’s getting harder and harder to remember what life was like then.
当然,大约在同一时间,移动网络终于大行其道。以前手机上也有网络浏览器,但用技术术语来说,它们很糟糕。
And of course it was about this same time that the Mobile Web finally came into its own. There had been Web browsers on phones before, but they—to use the technical term—sucked.
正如精灵恰当地指出的那样,问题一直是——狭小的居住空间。移动设备意味着狭窄的设备,将一张纸大小的网页挤进邮票大小的屏幕中。人们对解决方案进行了各种尝试,甚至出现了一些严重贬低的“移动”版本的网站(还记得按数字来选择编号的菜单项吗?),并且像往常一样,早期采用者和真正需要数据的人都糊涂了。
The problem had always been—as the Genie aptly put it—the itty-bitty living space. Mobile devices meant cramped devices, squeezing Web pages the size of a sheet of paper into a screen the size of a postage stamp. There were various attempts at solutions, even some profoundly debased “mobile” versions of sites (remember pressing numbers to select numbered menu items?) and, as usual, the early adopters and the people who really needed the data muddled through.
但苹果公司将更多的计算机性能与精心设计的浏览器界面结合起来(在一个令人愉悦的、轻薄的、美观的包装中——为什么轻薄的手表如此受欢迎?)。苹果公司最伟大的发明之一就是能够非常快速地滚动(上下滑动)和放大和缩小(捏合和……松开)。(正是由于硬件的响应速度非常快,它才最终变得有用。)
But Apple married more computer horsepower (in an emotionally pleasing, thin, aesthetic package—why are thin watches so desirable?) with a carefully wrought browser interface. One of Apple’s great inventions was the ability to scroll (swiping up and down) and zoom in and out (pinching and...unpinching) very quickly. (It was the very quickly part—the responsiveness of the hardware—that finally made it useful.)
这是第一次,在您可以随身携带的设备上使用网络变得很有趣。电池可以持续一整天。您可以随时随地查找任何内容。
For the first time, the Web was fun to use on a device that you could carry with you at all times. With a battery that lasted all day. You could look up anything anywhere anytime.
很难高估这是多么巨大的变化。
It’s hard to overestimate what a sea change this was.
当然,这不仅仅与网络有关。想想看,智能手机让您可以随时在口袋或钱包中携带多少东西:一台相机(静态和视频,对于许多人来说,这是他们曾经拥有过的最好的相机),带有整个地图的 GPS世界、手表、闹钟、你所有的照片和音乐等等。
Of course, it wasn’t only about the Web. Just consider how many things the smartphone allowed you to carry in your pocket or purse at all times: a camera (still and video, and, for many people, the best one they’d ever owned), a GPS with maps of the whole world, a watch, an alarm clock, all of your photos and music, etc., etc.
这是事实:最好的相机确实是您随身携带的相机。
It’s true: The best camera really is the one you have with you.
想想这样一个事实:对于新兴国家的大多数人来说,就像他们绕过固定电话直接使用手机一样,智能手机是他们的第一台也是唯一一台计算机。
And think about the fact that for most people in emerging countries, in the same way they bypassed landlines and went straight to cellphones, the smartphone is their first—and only—computer.
无可否认,移动设备是未来的潮流,除非您需要强大的马力(例如专业视频编辑,至少目前如此)或大型游戏平台(Photoshop 或 CAD)。
There’s not much denying that mobile devices are the wave of the future, except for things where you need enormous horsepower (professional video editing, for example, at least for now) or a big playing surface (Photoshop or CAD).
那么,当您设计移动设备时,可用性有何不同?
So, what’s different about usability when you’re designing for use on a mobile device?
从某种意义上说,答案是:不多。基本原理仍然相同。如果说有什么不同的话,那就是人们的移动速度越来越快,在小屏幕上阅读的次数甚至更少。
In one sense, the answer is: Not much. The basic principles are still the same. If anything, people are moving faster and reading even less on small screens.
但移动设备存在一些显着差异,导致新的可用性问题面临挑战。
But there are some significant differences about mobile that make for challenging new usability problems.
在我撰写本文时,移动设备的 Web 和应用程序设计在很多方面仍处于“狂野西部”的形成时期。事情还需要几年的时间才能摆脱困境,可能正好赶上创新,迫使整个周期重新开始。
As I write this, Web and app design for mobile devices is still in its formative “Wild West” days in many ways. It’s going to take another few years for things to shake out, probably just in time for innovations that will force the whole cycle to start over again.
我不会过多谈论具体的最佳实践,因为许多最终将成为流行惯例的明亮的界面设计思想可能还没有出现。当然,技术在我们脚下的变化速度将比我们奔跑的速度还要快。
I’m not going to talk very much about specific best practices because many of the bright interface design ideas that will eventually become the prevailing conventions probably haven’t emerged yet. And of course the technology is going to keep changing under our feet faster than we can run.
“应用程序” | 西客CD网
“App” | xkcd.com
我要做的就是告诉你一些我确信将继续真实的事情。第一个是...
What I will do is tell you a few things that I’m sure will continue to be true. And the first one is...
看待设计(任何类型的设计)的一种方式是,它本质上是关于约束(你必须做的事情和你不能做的事情)和权衡(你为了生活在约束中而做出的不太理想的选择) 。
One way to look at design—any kind of design—is that it’s essentially about constraints (things you have to do and things you can’t do) and tradeoffs (the less-than-ideal choices you make to live within the constraints).
用林肯的话来说,你能做的最好的事情就是在某些时候取悦一些人。2
To paraphrase Lincoln, the best you can do is please some of the people some of the time.2
2 ……事实上,如果他真的说过“你可以一直愚弄一些人,也可以在某些时候愚弄所有人,但你不能一直愚弄所有人。” 我从互联网上学到的一件事是,当谈到名人的令人难忘的名言时,92%的时间他们从未说过这些话。请参阅en.wikiquote.org/wiki/Abraham_Lincoln。
2 ...if, in fact, he ever actually said “You can fool some of the people all of the time, and all of the people some of the time, but you cannot fool all of the people all of the time.” One of the things I’ve learned from the Internet is that when it comes to memorable sayings attributed to famous people, 92% of the time they never said them. See en.wikiquote.org/wiki/Abraham_Lincoln.
有一个公认的模因表明,约束并不像他们经常认为的那样是负面力量,而是实际上使设计变得更容易并促进创新。
There’s a well-established meme that suggests that rather than being the negative force that they often feel like, constraints actually make design easier and foster innovation.
确实,限制往往是有帮助的。如果沙发必须适合这个空间并与这种配色方案相匹配,那么有时找到一张沙发比直接购买任何沙发更容易。固定一些东西可以产生聚焦效果,一张空白的画布拥有无限的选择——虽然听起来很自由——但可能会产生瘫痪的效果。
And it’s true that constraints are often helpful. If a sofa has to fit in this space and match this color scheme, it’s sometimes easier to find one than if you just go shopping for any sofa. Having something pinned down can have a focusing effect, where a blank canvas with its unlimited options—while it sounds liberating—can have a paralyzing effect.
您可能不相信约束会产生积极影响,但这并不重要:无论何时进行设计,您都在处理约束。哪里有限制,哪里就需要做出权衡。
You may not buy the idea that constraints are a positive influence, but it really doesn’t matter: Whenever you’re designing, you’re dealing with constraints. And where there are constraints, there are tradeoffs to be made.
根据我的经验,许多(如果不是大多数)严重的可用性问题都是由于权衡决策不当造成的。
In my experience, many—if not most—serious usability problems are the result of a poor decision about a tradeoff.
例如,我不在 iPhone 上使用 CBS 新闻。
For example, I don’t use CBS News on my iPhone.
随着时间的推移,我了解到他们的故事被分解成太小的(对我来说)块,并且每个故事都需要很长时间才能加载。(如果页面加载速度更快,我可能不介意。)更雪上加霜的是,在每个新页面上,您必须向下滚动越过同一张照片才能看到下一小段文字。
I’ve learned over time that their stories are broken up into too-small (for me) chunks, and each one takes a long time to load. (If the pages loaded faster, I might not mind.) And to add insult to injury, on each new page you have to scroll down past the same photo to get to the next tiny morsel of text.
体验如下:
Here’s what the experience looks like:
点击打开故事,然后等待。等待。等待。
Tap to open the story, then wait. And wait. And wait.
当页面最终加载时,滑动以向下滚动经过照片。
When the page finally loads, swipe to scroll down past the photo.
阅读两段文字,然后点击“下一步”并等待。等待。
Read the two paragraphs of text, then tap Next and wait. And wait.
重复8遍,读完整个故事。
Repeat 8 times to read the whole story.
令人烦恼的是,当我扫描 Google 新闻(我每天都会扫描几次)并注意到我要点击的报道链接到 CBS 新闻时,我总是点击 Google 的“更多报道”链接来选择另一个报道来源。
It’s so annoying that when I’m scanning Google News (which I do several times a day) and notice that the story I’m about to tap is linked to CBS News, I always click on Google’s “More stories” link to choose another source.
当我遇到这样的问题时,我知道它不存在,因为设计它的人没有考虑到它。事实上,我确信这是一些激烈辩论的主题,最终达成了妥协。
When I run into a problem like this, I know that it’s not there because the people who designed it didn’t think about it. In fact, I’m sure it was the subject of some intense debate that resulted in a compromise.
我不知道在这个特定的权衡中存在哪些限制。由于页面上有广告,可能需要产生更多的页面浏览量。或者它可能与内容管理系统中出于其他目的而对内容进行分段的方式有关。我不知道。我所知道的是,他们所做的选择没有足够重视为用户创造良好的体验。
I don’t know what constraints were at work in this particular tradeoff. Since there are ads on the pages, it may have been a need to generate more page views. Or it could have something to do with the way the content is segmented for other purposes in their content management system. I have no idea. All I do know is that the choice they made didn’t place enough weight on creating a good experience for the user.
创造良好的移动可用性的大部分挑战都归结为做出良好的权衡。
Most of the challenges in creating good mobile usability boil down to making good tradeoffs.
移动屏幕最明显的一点是它们很小。几十年来,我们一直在设计屏幕,虽然当时的网页设计师可能觉得它们很小,但按照今天的标准来看,它们已经很豪华了。即便如此,设计师们仍在加班加点,试图将所有内容都纳入视野。
The most obvious thing about mobile screens is that they’re small. For decades, we’ve been designing for screens which, while they may have felt small to Web designers at the time, were luxurious by today’s standards. And even then, designers were working overtime trying to squeeze everything into view.
但如果您以前认为主页空间很宝贵,请尝试在移动网站上完成同样的事情。因此肯定需要做出许多新的权衡。
But if you thought Home page real estate was precious before, try accomplishing the same things on a mobile site. So there are definitely many new tradeoffs to be made.
处理较小居住空间的一种方法是忽略一些东西:创建一个移动网站,作为完整网站的子集。当然,这提出了一个棘手的问题:你遗漏了哪些部分?
One way to deal with a smaller living space is to leave things out: Create a mobile site that is a subset of the full site. Which, of course, raises a tricky question: Which parts do you leave out?
一种方法是移动优先。您不必先设计网站的全功能(可能是臃肿)版本,然后将其削减以创建移动版本,而是首先根据对用户最重要的功能和内容设计移动版本。然后,您添加更多功能和内容来创建桌面/完整版本。
One approach was Mobile First. Instead of designing a full-featured (and perhaps bloated) version of your Web site first and then paring it down to create the mobile version, you design the mobile version first based on the features and content that are most important to your users. Then you add on more features and content to create the desktop/full version.
这是一个好主意。一方面,移动优先意味着您将努力确定什么是真正重要的、人们最需要的。总是一件好事。
It was a great idea. For one thing, Mobile First meant that you would work hard to determine what was really essential, what people needed most. Always a good thing to do.
但有些人将其解释为您应该根据人们在移动时想要做什么来选择要包含的内容。这假设当人们访问移动版本时,他们是“在移动中”,而不是坐在办公桌前,因此他们只需要您在移动中使用的功能。例如,您可能想在外出购物时检查银行余额,但您不太可能核对支票簿或设置新帐户。
But some people interpreted it to mean that you should choose what to include based on what people want to do when they’re mobile. This assumed that when people accessed the mobile version they were “on the move,” not sitting at their desk, so they’d only need the kinds of features you’d use on the move. For example, you might want to check your bank balances while out shopping, but you wouldn’t be likely to reconcile your checkbook or set up a new account.
当然,事实证明这是错误的。人们也可能坐在家里的沙发上使用移动设备,并且他们希望(并期望)能够做所有事情。或者至少,每个人都想做一些事情,如果你把它们全部加起来,那就等于一切。
Of course, it turned out this was wrong. People are just as likely to be using their mobile devices while sitting on the couch at home, and they want (and expect) to be able to do everything. Or at least, everybody wants to do some things, and if you add them all up it amounts to everything.
如果你要把所有事情都包括在内,你就必须更加注意优先顺序。
If you’re going to include everything, you have to pay even more attention to prioritizing.
我想快速或频繁使用的东西应该放在手边。其他一切都可以通过几次点击完成,但应该有一条明显的路径可以到达它们。
Things I want to use in a hurry or frequently should be close at hand. Everything else can be a few taps away, but there should be an obvious path to get to them.
在某些情况下,每个屏幕上缺乏空间意味着移动网站比全尺寸网站要深得多,因此您可能需要点击三个、四个或五个“级别”才能访问某些功能或内容。
In some cases, the lack of space on each screen means that mobile sites become much deeper than their full-size cousins, so you might have to tap down three, four, or five “levels” to get to some features or content.
这意味着人们会点击更多,但没关系。对于小屏幕来说,这是不可避免的:要查看相同数量的信息,您将需要更多地点击或滚动。只要用户继续充满信心他们想要的是屏幕下方或链接或按钮后面,他们会继续前进。
This means that people will be tapping more, but that’s OK. With small screens it’s inevitable: To see the same amount of information, you’re going to be either tapping or scrolling a lot more. As long as the user continues to feel confident that what they want is further down the screen or behind that link or button, they’ll keep going.
不过,这里是要记住的主要事情:
Here’s the main thing to remember, though:
应对房地产挑战不应以牺牲可用性为代价3
MANAGING REAL ESTATE CHALLENGES SHOULDN’T BE DONE AT THE COST OF USABILITY3
3 感谢 Manikandan Baluchamy 的这句格言。
3 Thanks to Manikandan Baluchamy for this maxim.
单一设计适合所有屏幕尺寸的诱惑由来已久,充满了光明的希望、破碎的承诺以及疲惫的设计师和开发人员。
The siren song of one-design-fits-all-screen-sizes has a long history of bright hopes, broken promises, and weary designers and developers.
如果我可以告诉您关于可扩展设计的两件事(又名动态布局、流体设计、自适应设计和响应式设计),那就是:
If there are two things I can tell you about scalable design (a/k/a dynamic layout, fluid design, adaptive design, and responsive design), they’re these:
这往往需要大量的工作。
It tends to be a lot of work.
想要做好是非常困难的。
It’s very hard to do it well.
过去,可扩展设计(创建一个在许多不同尺寸的屏幕上看起来都不错的网站版本)是可选的。这似乎是一个好主意,但很少有人真正关心它。现在小屏幕正在占据主导地位,每个人都关心:如果您有一个网站,您必须使其在任何尺寸的屏幕上都可用。
In the past, scalable design—creating one version of a site that would look good on many different size screens—was optional. It seemed like a good idea, but very few people actually cared about it. Now that small screens are taking over, everybody cares: If you have a Web site, you have to make it usable on any size screen.
开发人员很早就认识到,尝试创建任何东西的单独版本(可以说保留两套书籍)肯定会走向疯狂。它(至少)增加了一倍的工作量,并保证要么不会频繁更新,要么版本不同步。
Developers learned long ago that trying to create separate versions of anything—keeping two sets of books, so to speak—is a surefire path to madness. It doubles the effort (at least) and guarantees that either things won’t be updated as frequently or the versions will be out of sync.
事情还在整理中。这一次,这个问题对收入产生了真正的影响,所以会有技术解决方案,但这需要时间。
It’s still getting sorted out. This time, the problem has real revenue implications, so there will be technical solutions, but it will take time.
In the meantime, here are three suggestions:
允许缩放。如果您根本没有资源来“移动”您的网站,并且您没有使用响应式设计,那么您至少应该确保您的网站不会阻碍在移动设备上查看它的努力。没有什么比在手机上打开网站并发现根本无法放大微小文本更令人烦恼的事情了。(嗯,好吧。其实还有很多更烦人的事情。不过也挺烦人的。)
Allow zooming. If you don’t have the resources to “mobilize” your site at all and you’re not using responsive design, you should at least make sure that your site doesn’t resist efforts to view it on a mobile device. There are few things more annoying than opening up a site on your phone and discovering that you can’t zoom in on the tiny text at all. (Well, all right. Actually there are a lot of things more annoying. But it’s pretty annoying.)
别让我站在前门。另一个真正的麻烦是:您点击电子邮件或社交媒体网站中的链接,而不是将您带到相关文章,而是将您带到移动主页,让您自己寻找内容。
Don’t leave me standing at the front door. Another real nuisance: You tap on a link in an email or a social media site and instead of taking you to the article in question it takes you to the mobile Home page, leaving you to hunt for the thing yourself.
始终提供“完整”网站的链接。无论您的移动网站多么出色和完整,您都需要为用户提供查看非移动版本的选项,尤其是当它具有移动版本中不可用的功能和信息时。(当前的惯例是在每个页面的底部放置移动站点/完整站点切换。)
Always provide a link to the “full” Web site. No matter how fabulous and complete your mobile site is, you do need to give users the option of viewing the non-mobile version, especially if it has features and information that aren’t available in your mobile version. (The current convention is to put a Mobile Site/Full Site toggle at the bottom of every page.)
在很多情况下,人们愿意通过移动设备的小视口进行放大和缩小,以换取随时访问他们当时习惯使用或需要的功能。此外,有些人在使用具有高分辨率屏幕的 7 英寸平板电脑时,更喜欢在横向模式下查看桌面页面。
There are many situations where people will be willing to zoom in and out through the small viewport of a mobile device in return for access on the go to features they’ve become accustomed to using or need at that moment. Also, some people will prefer to see the desktop pages when using 7″ tablets with high-resolution screens in landscape mode.
可供性是对象设计中的视觉线索,建议我们如何使用它。(我在第 3 章中提到过它们。还记得 Don Norman 的门把手和书吗?他在 1988 年第一版《日常事物的设计》中普及了这个术语,设计界很快就采用了它。4)
Affordances are visual clues in an object’s design that suggest how we can use it. (I mentioned them back in Chapter 3. Remember the doorknobs and the book by Don Norman? He popularized the term in the first edition of The Design of Everyday Things in 1988 and the design world quickly adopted it.4)
4 不幸的是,他们使用的方式并不完全符合他的意图。他在新版《日常事物》中澄清了这一点,建议将这些线索称为“能指”,但现在将这个精灵放回瓶子里可能为时已晚。向 Don 致歉,我将在这里继续称它们为可供性,因为 (a) 这仍然是普遍的用法,(b) 否则它会让我头疼。
4 Unfortunately, the way they used it wasn’t exactly what he intended. He’s clarified it in the new edition of Everyday Things by proposing to call the clues “signifiers” instead, but it may be too late to put that genie back in the bottle. With apologies to Don, I’m going to keep calling them affordances here because (a) it’s still the prevailing usage, and (b) it makes my head hurt too much otherwise.
可供性是可视化用户界面的主要内容。例如,某些按钮的三维样式清楚地表明它们是需要单击的。与链接信息的气味一样,视觉线索越清晰,信号就越明确。
Affordances are the meat and potatoes of a visual user interface. For instance, the three-dimensional style of some buttons makes it clear they’re meant to be clicked. The same as with the scent of information for links, the clearer the visual cues, the more unambiguous the signal.
同样,周围有边框的矩形框表明您可以单击它并输入一些内容。如果您有一个没有边框的可编辑文本框,用户仍然可以单击它并输入内容(如果他知道它在那里)。但正是其可供性(即边界)使其功能变得清晰。
In the same way, a rectangular box with a border around it suggests that you can click in it and type something. If you had an editable text box without a border, the user could still click on it and type in it if he knew it was there. But it’s the affordance—the border—that makes its function clear.
为了让可供性发挥作用,它们需要引人注目,而移动设备的某些特性使它们不那么引人注目,或者更糟糕的是,变得不可见。根据定义,可供性是你最不应该隐藏的东西。
For affordances to work, they need to be noticeable, and some characteristics of mobile devices have made them less noticeable or, worse, invisible. And by definition, affordances are the last thing you should hide.
这并不是说所有的可供性都需要打你的脸。它们必须足够明显,以便人们能够注意到完成任务所需的人员。
This is not to say that all affordances need to hit you in the face. They just have to be visible enough that people can notice the ones they need to get their tasks done.
在触摸屏出现之前,网页设计已经严重依赖一种称为悬停的功能,即当用户将光标指向屏幕元素而不单击时,屏幕元素会以某种方式发生变化。
Before touch screens arrived, Web design had come to rely heavily on a feature called hover—the ability of screen elements to change in some way when the user points the cursor at them without clicking.
但电容式触摸屏(几乎用于所有移动设备)无法准确地感知手指悬停在玻璃上方,只有当手指触摸过它时。这就是为什么他们没有光标。5
But a capacitive touch screen (used on almost all mobile devices) can’t accurately sense that a finger is hovering above the glass, only when the finger has touched it. This is why they don’t have a cursor.5
5 您是否注意到光标不见了?我不得不承认,在我意识到没有光标之前,我使用了我的第一部 iPhone 几个月。
5 Did you ever notice that the cursor was missing? I have to admit that I used my first iPhone for several months before it dawned on me that there was no cursor.
因此,许多依赖于悬停的有用界面功能不再可用,例如工具提示、改变形状或颜色以指示它们可点击的按钮,以及下拉菜单以显示其内容,而无需强迫您做出选择。选择。
As a result, many useful interface features that depended on hover are no longer available, like tool tips, buttons that change shape or color to indicate that they’re clickable, and menus that drop down to reveal their contents without forcing you to make a choice.
作为设计师,您需要意识到这些元素对于移动用户来说并不存在,并尝试找到替代它们的方法。
As a designer, you need to be aware that these elements don’t exist for mobile users and try to find ways to replace them.
可供性需要视觉区别。但最近界面设计的趋势(在您阅读本文时可能已经减弱)已经朝着完全相反的方向发展:消除视觉差异并“扁平化”界面元素的外观。
Affordances require visual distinctions. But the recent trend in interface design (which may have waned by the time you read this) has moved in exactly the opposite direction: removing visual distinctions and “flattening” the appearance of interface elements.
它看起来非常好(无论如何,对某些人来说),并且它可以使屏幕看起来不那么混乱。但价格是多少?
It looks darned good (to some people, anyway), and it can make screens less cluttered-looking. But at what price?
在这种情况下,需要在一方面干净、整洁的外观和另一方面提供足够的视觉信息以便人们能够感知可供性之间进行权衡。
In this case the tradeoff is between a clean, uncluttered look on one hand and providing sufficient visual information so people can perceive affordances on the other.
不幸的是,扁平化设计往往不仅会带来潜在的分散注意力的装饰,还会带来更多纹理元素所传达的有用信息。
Unfortunately, Flat design has a tendency to take along with it not just the potentially distracting decoration but also the useful information that the more textured elements were conveying.
吸引人们注意功能可见性所需的区别通常需要是多维的:某物的位置(例如,在导航栏中)及其格式(例如,反向类型、全部大写)告诉您它是一个菜单项。
The distinctions required to draw attention to an affordance often need to be multi-dimensional: It’s the position of something (e.g., in the navigation bar) and its formatting (e.g., reversed type, all caps) that tell you it’s a menu item.
通过从设计调色板中消除许多这些区别,扁平化设计使区分事物变得更加困难。
By removing a number of these distinctions from the design palette, Flat design makes it harder to differentiate things.
扁平化设计吸走了房间里的空气。它让我想起了我最喜欢的卡尔文和霍布斯卡通/漫画/漫画中的前彩色世界。(漫画的其余部分在第 13 章的末尾。)
Flat design has sucked the air out of the room. It reminds me of the pre-color world in my favorite Calvin and Hobbes cartoon/comic/comic strip. (The rest of the cartoon is at the end of Chapter 13.)
卡尔文和霍布斯 © 1989 Watterson。经 UNIVERSAL UCLICK 许可转载。版权所有。
CALVIN AND HOBBES © 1989 Watterson. Reprinted with permission of UNIVERSAL UCLICK. All rights reserved.
您可以进行所有您想要的平面设计(您可能必须这样做,这可能是被迫的),但请确保您使用所有剩余的尺寸来补偿您失去的东西。
You can do all the Flat design you want (you may have to, it may be forced on you), but make sure you’re using all of the remaining dimensions to compensate for what you lose.
...但是计算机永远不会太快。特别是在移动设备上,速度只会让一切感觉更好。性能低下意味着用户的挫败感和出版商的商誉损失。
...but computers can never be too fast. Particularly on mobile devices, speed just makes everything feel better. Slow performance equals frustration for users and loss of goodwill for publishers.
例如,我很喜欢美联社(美联社)移动应用程序的突发新闻提醒。它们总是我得到重大新闻报道的第一个暗示。
For instance, I prize the breaking news alerts from the AP (Associated Press) mobile app. They’re always the first hint I get of major news stories.
但不幸的是,对于美联社来说,每当我点击其中一个警报时,该应用程序都会坚持先加载所有其他当前热门故事的大量照片,然后再向我显示有关该警报的任何详细信息。
Unfortunately for AP, though, whenever I tap on one of their alerts, the app insists on loading a huge chunk of photos for all the other current top stories before showing me any details about the alert.
结果,我养成了一个新习惯:当美联社警报到达时,我立即打开《纽约时报》网站或谷歌新闻,看看他们是否已经报道了这个故事。
As a result, I’ve formed a new habit: When an AP alert arrives, I immediately open the New York Times site or Google News to see if they’ve picked up the story yet.
如今,我们都习惯了非常快的连接,但我们必须记住,移动下载速度并不可靠。如果人们在家或坐在星巴克里,下载速度可能不错,但一旦他们离开舒适的 Wi-Fi 并恢复到 4G 或 3G 或更差的网络,性能可能会有很大差异。
We’re all used to very fast connections nowadays, but we have to remember that mobile download speeds are unreliable. If people are at home or sitting at Starbucks, download speeds are probably good, but once they leave the comfort of Wi-Fi and revert to 4G or 3G or worse, performance can vary widely.
请注意,您的响应式设计解决方案不会加载包含大量代码和图像的页面,这些代码和图像的大小超出了用户屏幕所需的大小。
Be careful that your responsive design solutions aren’t loading up pages with huge amounts of code and images that are larger than necessary for the user’s screen.
您可能还记得在第 9 页上我提到过,稍后我将讨论一些人在可用性定义中包含的属性:有用的、可学习的、令人难忘的、有效的、高效的、令人向往的和令人愉快的。嗯,那个时候已经到了。
You may remember that way back on page 9 I mentioned that I’d talk later about attributes that some people include in their definitions of usability: useful, learnable, memorable, effective, efficient, desirable, and delightful. Well, that time has arrived.
就我个人而言,我的重点始终放在对可用性定义至关重要的三个方面:
Personally, my focus has always been on the three that are central to my definition of usability:
具有平均水平(甚至低于平均水平)能力和经验的人可以弄清楚如何使用该事物[即,它是可学习的]来完成某些[有效]的事情,而不会比它的价值[高效]更麻烦。
A person of average (or even below average) ability and experience can figure out how to use the thing [i.e., it’s learnable] to accomplish something [effective] without it being more trouble than it’s worth [efficient].
我不会花太多时间思考这些东西是否有用,因为它在我看来更像是一个营销问题,应该在任何项目开始之前使用访谈、焦点小组和调查等方法来确定。某件事是否令人满意似乎也是一个营销问题,我将在最后一章对此进行更多讨论。
I don’t spend much time thinking about whether things are useful because it strikes me as more of a marketing question, something that should be established before any project starts, using methods like interviews, focus groups, and surveys. Whether something is desirable seems like a marketing question too, and I’ll have more to say about that in the final chapter.
现在我们来谈谈愉悦性、易学性和易记忆性以及它们如何应用于移动应用程序。
For now let’s talk about delight, learnability, and memorability and how they apply to mobile apps.
无论如何,这个“快乐”的东西是什么?
What is this “delight” stuff, anyway?
喜悦有点难以确定;这更像是“当我感觉到的时候我就会知道”之类的事情。与定义相比,识别人们在描述令人愉悦的产品时使用的一些词可能更容易:有趣、令人惊讶、令人印象深刻、迷人、聪明,甚至神奇。6
Delight is a bit hard to pin down; it’s more one of those “I’ll know it when I feel it” kind of things. Rather than a definition, it’s probably easier to identify some of the words people use when describing delightful products: fun, surprising, impressive, captivating, clever, and even magical.6
6 我个人对一款令人愉快的应用程序的标准往往是“做一些你在几百年前就会被烧死的事情”。
6 My personal standard for a delightful app tends to be “does something you would have been burned at the stake for a few hundred years ago.”
令人愉快的应用程序通常来自于将人们真正喜欢做的事情的想法与关于如何使用一些新技术来完成它的好主意结合起来。
Delightful apps usually come from marrying an idea about something people would really enjoy being able to do, but don’t imagine is possible, with a bright idea about how to use some new technology to accomplish it.
SoundHound 就是一个完美的例子。
SoundHound is a perfect example.
它不仅可以识别您在任何地方听到的歌曲,还可以显示歌词并与歌曲同步滚动。
Not only can it identify that song that you hear playing wherever you happen to be, but it can display the lyrics and scroll them in sync with the song.
Paper 并不是普通的绘图应用程序。您将获得五个没有选项的工具,而不是数十个具有数千个选项的工具。每一项都经过优化,以创造出看起来不错的东西。
And Paper is not your average drawing app. Instead of dozens of tools with thousands of options, you get five tools with no options. And each one is optimized to create things that look good.
由于应用程序市场竞争如此激烈,为移动应用程序带来乐趣变得越来越重要。仅仅把某件事做好并不足以创造出成功;你必须把某件事做得非常好。喜悦有点像用户体验设计的额外学分分配。
Building delight into mobile apps has become increasingly important because the app market is so competitive. Just doing something well isn’t good enough to create a hit; you have to do something incredibly well. Delight is sort of like the extra credit assignment of user experience design.
让您的应用程序令人愉悦是一个很好的目标。只是不要过于关注它而忘记让它也可用。
Making your app delightful is a fine objective. Just don’t focus so much attention on it that you forget to make it usable, too.
应用程序的最大问题之一是,如果它们具有多个功能,则它们可能不太容易学习。
One of the biggest problems with apps is that if they have more than a few features they may not be very easy to learn.
以清除为例。这是一个用于制作列表的应用程序,例如待办事项列表。它出色、创新、美观、有用且使用起来很有趣,具有干净简约的界面。所有的交互都是优雅的动画,具有复杂的音效。一位评论者说:“这几乎就像我在玩弹球机的同时保持工作效率。”
Take Clear, for example. It’s an app for making lists, like to-do lists. It’s brilliant, innovative, beautiful, useful, and fun to use, with a clean minimalist interface. All of the interactions are elegantly animated, with sophisticated sound effects. One reviewer said, “It’s almost like I’m playing a pinball machine while I’m staying productive.”
问题是,它使用起来如此有趣的原因之一是他们提出了创新的交互、手势和导航,但还有很多东西需要学习。
The problem is that one reason it’s so much fun to use is that they’ve come up with innovative interactions, gestures, and navigation, but there’s a lot to learn.
对于大多数应用程序,如果您收到任何说明,那么当您第一次启动应用程序时,通常会出现一两个屏幕,其中会提供有关该应用程序如何工作的一些基本提示。但以后通常很难或不可能再次找到它们来阅读。
With most apps, if you get any instructions at all it’s usually one or two screens when you first launch the app that give a few essential hints about how the thing works. But it’s often difficult or impossible to find them again to read later.
如果确实存在帮助(并且您可以找到它),它通常是一小页文本或指向开发人员网站的链接,但找不到任何帮助,或者是一个客户支持页面,为您提供电子邮件地址,您可以在其中发送您的帮助。问题。
And if help exists at all (and you can find it), it’s often one short page of text or a link to the developer’s site with no help to be found or a customer support page that gives you the email address where you can send your questions.
这适用于只做很少事情的应用程序,但一旦您尝试创建具有很多功能的东西(尤其是任何不遵循熟悉的约定或界面指南的功能),这通常是不够的。
This can work for apps that are only doing a very few things, but as soon as you try to create something that has a lot of functionality—and particularly any functions that don’t follow familiar conventions or interface guidelines—it’s often not enough.
与大多数应用程序相比,制作 Clear 的人实际上在培训方面做得非常好。第一次使用它时,您可以通过精美插图的十个屏幕快速浏览主要功能。
The people who made Clear have actually done a very good job with training compared to most apps. The first time you use it, you tap your way through a nicely illustrated ten-screen quick tour of the main features.
This is followed by an ingenious tutorial that’s actually just one of their lists.
列表中的每一项都会告诉您一些可以尝试的内容,当您完成后,您已经练习使用几乎所有功能。
Each item in the list tells you something to try, and by the time you’re done you’ve practiced using almost all of the features.
但是当我在演示期间使用它进行演示可用性测试时,它的表现并不那么好。
But when I’ve used it to do demo usability tests during my presentations, it hasn’t fared so well.
我让参与者/志愿者有机会通过阅读应用程序商店中的说明、查看快速浏览并尝试教程中的操作来了解该应用程序。然后我要求他们执行应用程序设计的主要任务类型:创建一个名为“芝加哥旅行”的新列表,其中包含三个项目 - 预订酒店、租车和选择航班。
I give the participant/volunteer a chance to learn about the app by reading the description in the app store, viewing the quick tour, and trying the actions in the tutorial. Then I ask them to do the type of primary task the app is designed for: create a new list called “Chicago trip” with three items in it — Book hotel, Rent car, and Choose flight.
到目前为止,还没有人成功。
So far, no one has succeeded.
尽管在进入的幻灯片中显示了它,但人们似乎没有得到级别的概念:列表的级别、列表中项目的级别以及设置的级别。即使他们记得看到过它,他们仍然不知道如何在关卡之间导航。如果您无法弄清楚这一点,则无法进入帮助屏幕。第 22 条军规。
Even though it’s shown in the slide show on the way in, people don’t seem to get the concept that there are levels: the level of lists, the level of items in lists, and the level of settings. And even if they remember seeing it, they still can’t figure out how to navigate between levels. And if you can’t figure that out, you can’t get to the Help screens. Catch-22.
这并不是说现实世界中没有人学习如何使用它。它获得了好评,并且一直是畅销书。但我想知道有多少购买它的人从未掌握过它,或者如果它更容易学习,他们可以增加多少销售额。
That’s not to say that no one in the real world learns how to use it. It gets great reviews and is consistently a best seller. But I have to wonder how many people who bought it have never mastered it, or how many more sales they could make if it were easier to learn.
这是一家在培训和帮助方面投入大量精力的公司。大多数人没有。
And this is a company that’s put a lot of effort into training and help. Most don’t.
您需要比大多数人做得更好,可用性测试将帮助您弄清楚如何做。
You need to do better than most, and usability testing will help you figure out how.
还有一个重要的属性:可记忆性。一旦您弄清楚如何使用某个应用程序,您下次尝试时会记住如何使用它还是必须从头开始?
There’s one more attribute that’s important: memorability. Once you’ve figured out how to use an app, will you remember how to use it the next time you try or will you have to start over again from scratch?
我通常不会过多谈论记忆力,因为我认为让事情易于重新学习的最佳方法是首先让它们变得非常清晰且易于学习。如果第一次很容易学,那么第二次也很容易学。
I don’t usually talk much about memorability because I think the best way to make things easy to relearn is to make them incredibly clear and easy to learn in the first place. If it’s easy to learn the first time, it’s easy to learn the second time.
但这对于某些应用程序来说肯定是一个严重的问题。
But it’s certainly a serious problem with some apps.
我最喜欢的绘图应用程序之一是 ASketch。我喜欢这个应用程序,因为无论您尝试画什么以及画得多么粗糙,它最终都会看起来很有趣。
One of my favorite drawing apps is ASketch. I love this app because no matter what you try to draw and how crudely you draw it, it ends up looking interesting.
但几个月来,每次我打开它时,我都不记得如何开始新的绘画。
But for months, each time I opened it I couldn’t remember how to start a new drawing.
事实上,我不记得如何访问任何控件。为了最大化绘图空间,屏幕上没有任何图标。
In fact, I couldn’t remember how to get to any of the controls. To maximize the drawing space there weren’t any icons on the screen.
我会尝试所有常见的方法:双击、三次点击、点击屏幕顶部或底部的中间附近、各种滑动和多指点击,最后我会点击它。但当我下次使用它时,我又忘记了它的窍门是什么。
I’d try all the usual suspects: double tap, triple tap, tap near the middle at the top or bottom of the screen, various swipes and multi-finger taps, and finally I’d hit on it. But by the next time I went to use it I’d forgotten what the trick was again.
记忆力可能是人们是否经常使用应用程序的一个重要因素。通常,当您购买一个时,您会愿意立即花一些时间弄清楚如何使用它。但如果下次你必须投入同样的努力,这不太可能是一次令人满意的经历。除非你对它的功能印象深刻,否则你很可能会放弃它——这是大多数应用程序的命运。
Memorability can be a big factor in whether people adopt an app for regular use. Usually when you purchase one, you’ll be willing to spend some time right away figuring out how to use it. But if you have to invest the same effort the next time, it’s unlikely to feel like a satisfying experience. Unless you’re very impressed by what it does, there’s a good chance you’ll abandon it—which is the fate of most apps.
移动设备上的生活很便宜(99 美分)。
Life is cheap (99 cents) on mobile devices.
在大多数情况下,在移动设备上进行可用性测试与我在第 9 章中描述的测试完全相同。
For the most part, doing usability testing on mobile devices is exactly the same as the testing I described in Chapter 9.
你仍然在为人们制定任务并看着他们尝试去做。你仍然提示他们在工作时说出他们的想法。大多数时候你仍然需要保持安静,把探究性的问题留到最后。而且您仍然应该尝试让尽可能多的利益相关者亲自来观察测试。
You’re still making up tasks for people to do and watching them try to do them. You still prompt them to say what they’re thinking while they work. You still need to keep quiet most of the time and save your probing questions for the end. And you should still try to get as many stakeholders as possible to come and observe the tests in person.
当你进行移动测试时,几乎所有的不同都与过程无关;而与过程有关。这是关于物流的。
Almost everything that’s different when you’re doing mobile testing isn’t about the process; it’s about logistics.
当您在个人计算机上进行测试时,设置非常简单:
When you’re doing testing on a personal computer, the setup is pretty simple:
主持人与参与者看同一屏幕。
The facilitator looks at the same screen as the participant.
屏幕共享软件允许观察者看到正在发生的事情。
Screen sharing software allows the observers to see what’s happening.
屏幕录制软件会创建会话视频。
Screen recording software creates a video of the session.
但如果您曾经尝试在移动设备上进行测试,您就会知道设置可能会变得非常复杂:文档相机、网络摄像头、硬件信号处理器、物理约束(好吧,也许不是物理约束,但“不要移动设备”)超出这一点”标记,以使参与者保持在摄像机的视野范围内),甚至还有称为雪橇和鹅颈的东西。
But if you’ve ever tried doing tests on mobile devices, you know that the setup can get very complicated: document cameras, Webcams, hardware signal processors, physical restraints (well, maybe not physical restraints, but “Don’t move the device beyond this point” markers to keep the participant within view of a camera), and even things called sleds and goosenecks.
以下是您必须处理的一些问题:
Here are some of the issues you have to deal with:
您需要让参与者使用自己的设备吗?
Do you need to let the participants use their own devices?
他们是否需要自然地握住设备,或者可以将其放在桌子上或支撑在支架上吗?
Do they need to hold the device naturally, or can it be sitting on a table or propped up on a stand?
观察者需要看到什么(例如,仅屏幕,或屏幕和参与者的手指,以便他们可以看到他们的手势)?那么在观察室中如何展示呢?
What do the observers need to see (e.g., just the screen, or both the screen and the participant’s fingers so they can see their gestures)? And how do you display it in the observation room?
如何创建录音?
How do you create a recording?
移动测试复杂的主要原因之一是我们用于桌面测试的一些工具尚不存在于移动设备上。截至撰写本文时,强大的移动屏幕录制和屏幕共享应用程序尚不可用,主要是因为移动操作系统往往禁止后台进程。而且这些设备实际上并没有足够的马力来运行它们。
One of the main reasons why mobile testing is complicated is that some of the tools we rely on for desktop testing don’t exist yet for mobile devices. As of this writing, robust mobile screen recording and screen sharing apps aren’t available, mainly because the mobile operating systems tend to prohibit background processes. And the devices don’t really have quite enough horsepower to run them anyway.
我预计这种情况不久就会改变。由于有如此多的移动网站和应用程序需要测试,已经有很多公司试图提出解决方案。
I expect this to change before long. With so many mobile sites and apps to test, there are already a lot of companies trying to come up with solutions.
在更好的基于技术的解决方案出现之前,我倾向于:
Until better technology-based solutions come along, here’s what I’d lean toward:
使用指向屏幕的相机而不是镜像。镜像与屏幕共享相同:它显示屏幕上的内容。您可以使用软件(如 Apple 的 Airplay)或硬件(使用与在显示器或电视上播放手机或平板电脑上的视频相同的电缆)来完成此操作。
Use a camera pointed at the screen instead of mirroring. Mirroring is the same as screen sharing: It displays what’s on the screen. You can do it with software (like Apple’s Airplay) or hardware (using the same kind of cable you use to play a video from your phone or tablet on a monitor or TV).
但镜像并不是观看在触摸屏设备上完成的测试的好方法,因为您看不到参与者所做的手势和点击。在看不到参与者手指的情况下观看测试有点像观看自动钢琴:它移动得非常快并且很难跟上。看到手和屏幕更有吸引力。
But mirroring isn’t a good way to watch tests done on touch screen devices, because you can’t see the gestures and taps the participant is making. Watching a test without seeing the participant’s fingers is a little like watching a player piano: It moves very fast and can be hard to follow. Seeing the hand and the screen is much more engaging.
如果你要捕捉手指,就会涉及到相机。(有些镜像软件会在屏幕上显示点和条纹,但这不是同一件事。)
If you’re going to capture fingers, there’s going to be a camera involved. (Some mirroring software will shows dots and streaks on the screen, but it’s not the same thing.)
将相机连接到设备上,以便用户可以自然地握住它。在某些设置中,设备位于桌子或书桌上并且无法移动。在其他情况下,参与者可以握住该设备,但他们被告知将其放在用胶带标记的区域内。限制设备移动的唯一原因是为了更容易将相机对准它并保持在视野范围内。
Attach the camera to the device so the user can hold it naturally. In some setups, the device sits on a table or desk and can’t be moved. In others, the participant can hold the device, but they’re told to keep it inside an area marked with tape. The only reason for restricting movement of the device is to make it easier to point a camera at it and keep it in view.
如果您将摄像头连接到设备,参与者可以自由移动摄像头,并且屏幕将保持在视野中并处于对焦状态。
If you attach the camera to the device, the participant can move it freely and the screen will stay in view and in focus.
不要将相机对准参与者。我真的不喜欢脸部相机。一些观察者喜欢看到参与者的脸,但我认为这实际上是一种干扰。我更愿意让观察者专注于屏幕上发生的事情,而且他们几乎总能从用户的语气中判断出用户的感受。
Don’t bother with a camera pointed at the participant. I’m really not a fan of the face camera. Some observers like seeing the participant’s face, but I think it’s actually a distraction. I’d much rather have observers focus on what’s happening on the screen, and they can almost always tell what the user is feeling from their tone of voice anyway.
添加第二个摄像头不可避免地会使配置变得更加复杂,而且我认为不值得付出额外的复杂性。当然,如果你的老板坚持要见人脸,那就露脸吧。
Adding a second camera inevitably makes the configuration much more complicated, and I don’t think it’s worth the extra complexity. Of course, if your boss insists on seeing faces, show faces.
7 Brundlefly 是《苍蝇》中杰夫·高布伦 (Jeff Goldblum) 的角色(赛斯·布伦德尔饰)在使用隐形传输装置进行实验时,意外地将自己的 DNA 与苍蝇的 DNA 融合后,用这个词来形容自己。
7 Brundlefly is the word Jeff Goldblum’s character (Seth Brundle) in The Fly uses to describe himself after his experiment with a teleportation device accidentally merges his DNA with that of a fly.
出于好奇,我将书灯上的剪辑与网络摄像头合并起来,为自己打造了一个相机装备。它几乎没有重量,并通过内置麦克风捕获音频。我的零件成本约为 30 美元,制作时间约为一个小时。我确信不久之后就会有人制造出类似的东西,而且会更好。我将在Rocketsurgerymadeeasy.com上发布有关您自己在线构建的说明。
Out of curiosity, I built myself a camera rig by merging a clip from a book light with a Webcam. It weighs almost nothing and captures the audio with its built-in microphone. Mine cost about $30 in parts and took about an hour to make. I’m sure somebody will manufacture something similar—only much better—before long. I’ll put instructions for building one yourself online at rocketsurgerymadeeasy.com.
轻型网络摄像头 + 轻型夹具和鹅颈管 = Brundlefly
Lightweight webcam + Lightweight clamp and Gooseneck = Brundlefly
将摄像头连接到设备上可以创建非常易于跟踪的视图。即使参与者四处挥舞屏幕,观察者也能获得稳定的屏幕视图。
Attaching a camera to the device creates a very easy-to-follow view. The observers get a stable view of the screen even if the participant is waving it around.
我认为它解决了对其他安装摄像头解决方案的大部分反对意见:
I think it solves most of the objections to other mounted-camera solutions:
它们又重又笨拙。它几乎没有重量,几乎不会改变手机握在手中的感觉。
They’re heavy and awkward. It weighs almost nothing and barely changes the way the phone feels in your hand.
他们分散注意力。它非常小(比照片中看起来要小),并且位于参与者聚焦于手机的视线之外。
They’re distracting. It’s very small (smaller than it looks in the photo) and is positioned out of the participant’s line of sight, which is focused on the phone.
没有人愿意在手机上附加任何东西。雪橇通常通过 Velcro 或双面胶带固定在手机上。它使用了一个带衬垫的夹子,不会刮伤或损坏任何东西,但仍能牢牢地夹住设备。
Nobody wants to attach anything to their phone. Sleds are usually attached to phones with Velcro or double-sided tape. This uses a padded clamp that can’t scratch or mar anything but still grips the device firmly.
这种解决方案的一个限制是它是受限的:它需要一根 USB 延长线从相机连接到笔记本电脑。但您可以便宜地购买长延长杆。
One limitation of this kind of solution is that it is tethered: It requires a USB extension cable running from the camera to your laptop. But you can buy a long extension inexpensively.
其余的设置非常简单:
The rest of the setup is very straightforward:
通过 USB 将 Brundlefly 连接到主持人的笔记本电脑。
Connect the Brundlefly to the facilitator’s laptop via USB.
打开 AmCap(在 PC 上)或 QuickTime Player(在 Mac 上)等工具来显示 Brundlefly 的视图。协调员将观看此视图。
Open something like AmCap (on a PC) or QuickTime Player (on a Mac) to display the view from the Brundlefly. The facilitator will watch this view.
使用屏幕共享(GoToMeeting、WebEx 等)与观察者共享笔记本电脑屏幕
Share the laptop screen with the observers using screen sharing (GoToMeeting, WebEx, etc.)
在观察室的计算机上运行屏幕录像机(例如 Camtasia)。这减轻了主持人笔记本电脑的负担。
Run a screen recorder (e.g., Camtasia) on the computer in the observation room. This reduces the burden on the facilitator’s laptop.
就是这样。
That’s it.
从某种形式来看,移动设备显然是我们未来生活的地方,它为创造出色的用户体验和可用的东西提供了巨大的机会。新技术和外形因素将一直被引入,其中一些涉及截然不同的交互方式。8
In one form or another, it seems clear that mobile is where we’re going to live in the future, and it provides enormous opportunities to create great user experiences and usable things. New technologies and form factors are going to be introduced all the time, some of them involving dramatically different ways of interacting.8
8 就我个人而言,我认为与计算机对话将成为下一个重大事件之一。识别准确率已经惊人;我们只需要找到让人们与他们的设备交谈的方法,而不会看起来、听起来和感觉很愚蠢。认真解决问题的人应该给我打电话;我使用语音识别软件已经有 15 年了,对于它为什么没有流行起来我有很多想法。
8 Personally, I think talking to your computer is going to be one of the next big things. Recognition accuracy is already amazing; we just need to find ways for people to talk to their devices without looking, sounding, and feeling foolish. Someone who’s seriously working on the problems should give me a call; I’ve been using speech recognition software for 15 years, and I have a lot of thoughts about why it hasn’t caught on.
只要确保可用性不会在混乱中丢失即可。最好的方法是通过测试。
Just make sure that usability isn’t being lost in the shuffle. And the best way to do this is by testing.
为什么您的网站应该是一个 MENSCH 1
WHY YOUR WEB SITE SHOULD BE A MENSCH1
1 Mensch:源自德语的意第绪语单词,最初的意思是“人类”。一个正直、有荣誉感的人;“一个直立的人”;做正确事的人。
1 Mensch: a German-derived Yiddish word originally meaning “human being.” A person of integrity and honor; “a stand-up guy”; someone who does the right thing.
真诚:这是最难的部分。如果你能假装这一点,剩下的就很容易了。
Sincerity: that’s the hard part. If you can fake that, the rest is easy.
——关于好莱坞经纪人的老笑话
—OLD JOKE ABOUT A HOLLYWOOD AGENT
前段时间,我订了飞往丹佛的航班。碰巧的是,我的航班日期也是我预订的航空公司与其工会之一进行集体谈判的截止日期。
Some time ago, I was booked on a flight to Denver. As it happened, the date of my flight also turned out to be the deadline for collective bargaining between the airline I was booked on and one of its unions.
出于担忧,我做了任何人都会做的事情:(a) 开始每小时检查一次谷歌新闻,看看是否达成了交易,(b) 访问航空公司的网站,看看他们对此有何评论。
Concerned, I did what anyone would do: (a) Start checking Google News every hour to see if a deal had been reached, and (b) visit the airline’s Web site to see what they were saying about it.
我惊讶地发现,航空公司的主页上不仅没有任何关于即将发生的罢工的信息,而且在整个网站上也找不到任何有关此次罢工的信息。我搜索了。我浏览了一下。我滚动浏览了他们所有的常见问题解答列表。一切如常,一切如常。“罢工?什么罢工?”
I was shocked to discover that not only was there nothing about the impending strike on the airline’s Home page, but there wasn’t a word about it to be found anywhere on the entire site. I searched. I browsed. I scrolled through all of their FAQ lists. Nothing but business as usual. “Strike? What strike?”
现在,在航空公司可能罢工的那天早上,您必须知道,实际上只有一个与该网站相关的常见问题,并且有数十万持有未来一周机票的人在问这个问题:将会发生什么大部头书?
Now, on the morning of a potential airline strike, you have to know that there’s really only one frequently asked question related to the site, and it’s being asked by hundreds of thousands of people who hold tickets for the coming week: What’s going to happen to me?
我可能希望找到专门针对该主题的完整常见问题解答列表:
I might have expected to find an entire FAQ list dedicated to the topic:
真的要罢工吗?
Is there really going to be a strike?
目前会谈进展如何?
What’s the current status of the talks?
如果发生罢工,会发生什么?
If there is a strike, what will happen?
我如何才能重新预订航班?
How will I be able to rebook my flight?
你会做什么来帮助我?
What will you do to help me?
没有什么。
Nothing.
我能从中得到什么?
What was I to take away from this?
(a) 航空公司没有针对特殊情况更新其主页的程序,(b) 出于某些法律或商业原因,他们不想承认可能会发生罢工,(c) 没有想到他们认为人们可能会感兴趣,或者(d)他们只是不愿意被打扰。
Either (a) the airline had no procedure for updating their Home page for special circumstances, (b) for some legal or business reason they didn’t want to admit that there might be a strike, (c) it hadn’t occurred to them that people might be interested, or (d) they just couldn’t be bothered.
无论真正的原因是什么,他们都出色地耗尽了我对航空公司及其网站的好感。他们的品牌——他们每年花费数亿美元打磨——对我来说肯定失去了一些光彩。
No matter what the real reason was, they did an outstanding job of depleting my goodwill towards both the airline and their Web site. Their brand—which they spend hundreds of millions of dollars a year polishing—had definitely lost some of its luster for me.
本书的大部分内容都是关于如何使网站变得清晰:确保用户能够理解他们正在查看的内容以及如何使用它,而无需付出过多的努力。人们清楚吗?他们“明白”了吗?
Most of this book has been about building clarity into Web sites: making sure that users can understand what it is they’re looking at—and how to use it—without undue effort. Is it clear to people? Do they “get it”?
但可用性还有另一个重要组成部分:做正确的事——考虑用户的感受。除了“我的网站清晰吗?” 你还需要问:“我的网站表现得像个正人君子吗?”
But there’s another important component to usability: doing the right thing—being considerate of the user. Besides “Is my site clear?” you also need to be asking, “Does my site behave like a mensch?”
我总是发现想象一下每次我们进入一个网站时都会充满善意是很有用的。我们在现场遇到的每个问题都会降低水库的水位。例如,我访问航空公司网站的情况可能是这样的:
I’ve always found it useful to imagine that every time we enter a Web site, we start out with a reservoir of goodwill. Each problem we encounter on the site lowers the level of that reservoir. Here, for example, is what my visit to the airline site might have looked like:
我进入网站。
I enter the site.
我的善意有点低,因为我不高兴他们的谈判可能会给我带来严重的不便。
My goodwill is a little low, because I’m not happy that their negotiations may seriously inconvenience me.
我浏览了一下主页。
I glance around the Home page.
感觉组织得很好,所以我放松了一点。我相信如果信息在这里,我就能找到它。
It feels well organized, so I relax a little. I’m confident that if the information is here, I’ll be able to find it.
主页上没有提及罢工。
There’s no mention of the strike on the Home page.
我不喜欢一切如常的感觉。
I don’t like the fact that it feels like business as usual.
主页上有五个新闻报道链接的列表,但没有一个是相关的。
There’s a list of five links to News stories on the Home page but none are relevant.
我单击列表底部的新闻稿链接。
I click on the Press Releases link at the bottom of the list.
最新新闻稿已发布五天。
Latest press release is five days old.
我转到“关于我们”页面。
I go to the About Us page.
没有有希望的链接,但有大量的促销活动,这非常烦人。当我不确定他们明天是否会载我时,为什么他们试图向我出售更多机票?
No promising links, but plenty of promotions, which is very annoying. Why are they trying to sell me more tickets when I’m not sure they’re going to fly me tomorrow?
我搜索“罢工”,找到了两篇关于一年前罢工的新闻稿,以及有关 20 世纪 50 年代罢工的公司历史页面。
I search for “strike” and find two press releases about a strike a year ago and pages from the corporate history about a strike in the 1950s.
此时,我想离开,但他们是此信息的唯一来源。
At this point, I would like to leave, but they’re the sole source for this information.
我浏览了他们的常见问题解答列表,然后离开。
I look through their FAQ lists, then leave.
水库是有限的,如果你对待用户足够恶劣并且耗尽了水库,他们很可能会离开。但离开并不是唯一可能的负面结果;他们将来可能不会那么渴望使用您的网站,或者他们可能会轻视您的组织并在 Facebook 或 Twitter 上对您进行攻击。对于从事营销工作的人来说,您的 NPS(净推荐值)可能会下降。
The reservoir is limited, and if you treat users badly enough and exhaust it there’s a good chance that they’ll leave. But leaving isn’t the only possible negative outcome; they may not be as eager to use your site in the future, or they may think less of your organization and savage you on Facebook or Twitter. For those of you in marketing, your NPS (Net Promoter Score) probably goes down.
关于这个水库,有几点值得注意:
There are a few things worth noting about this reservoir:
这很奇特。有些人的水库很大,有些人的水库很小。有些人生性多疑,或者脾气暴躁;其他人本质上更耐心、更信任、或更乐观。关键是,你不能指望有很大的储备。
It’s idiosyncratic. Some people have a large reservoir, some small. Some people are more suspicious by nature, or more ornery; others are inherently more patient, trusting, or optimistic. The point is, you can’t count on a very large reserve.
这是视情况而定的。如果我很着急,或者刚刚在另一个网站上经历过一次糟糕的经历,那么当我进入你的网站时,我的消耗性商誉可能已经很低,即使我自然有很大的储备。
It’s situational. If I’m in a huge hurry, or have just come from a bad experience on another site, my expendable goodwill may already be low when I enter your site, even if I naturally have a large reserve.
您可以重新填充它。即使你犯了一些错误,削弱了我的善意,你也可以通过做一些让我觉得你在照顾我的最大利益的事情来补充它。
You can refill it. Even if you’ve made mistakes that have diminished my goodwill, you can replenish it by doing things that make me feel like you’re looking out for my best interests.
有时一个错误就可以清空它。例如,仅仅打开一张包含大量字段的注册表可能就足以导致某些人的储备立即跌至零。
Sometimes a single mistake can empty it. For instance, just opening up a registration form with tons of fields may be enough to cause some people’s reserve to plunge instantly to zero.
以下一些因素往往会让用户觉得发布网站的人没有把自己的最大利益放在心上:
Here are a few of the things that tend to make users feel like the people publishing a site don’t have their best interests at heart:
隐藏我想要的信息。最常见的隐藏内容是客户支持电话号码、运费和价格。
Hiding information that I want. The most common things to hide are customer support phone numbers, shipping rates, and prices.
隐藏支持电话号码的全部目的是试图阻止用户打电话,因为每次通话都要花钱。通常的效果是减少善意,并确保他们在找到号码并拨打电话时会更加恼火。另一方面,如果 800 号码显眼可见(甚至可能在每个页面上),那么不知何故知道他们可以根据需要拨打电话,这通常足以让人们在网站上寻找信息的时间更长,从而增加他们拨打电话的机会。自己会解决问题。
The whole point of hiding support phone numbers is to try to keep users from calling, because each call costs money. The usual effect is to diminish goodwill and ensure that they’ll be even more annoyed when they do find the number and call. On the other hand, if the 800 number is in plain sight—perhaps even on every page—somehow knowing that they can call if they want to is often enough to keep people looking for the information on the site longer, increasing the chances that they’ll solve the problem themselves.
一些网站隐藏定价信息,希望让用户深入了解这个过程,让他们在感受到价格冲击时感到归属感。我最喜欢的例子是在机场等公共场所进行无线访问的网站。看到“无线访问可用!” 签署并知道它在某些机场是免费的,您打开笔记本电脑,找到信号,然后尝试连接。但随后你必须扫描、阅读并点击三个页面,点击“无线访问”和“单击此处连接”等链接,然后才能到达甚至暗示可能要花多少钱的页面。这感觉就像一种古老的电话销售策略:如果他们能让你保持足够长的通话时间,并不断向你进行更多的营销宣传,也许他们可以一路说服你。
Some sites hide pricing information in hopes of getting users so far into the process that they’ll feel vested in it by the time they experience the sticker shock. My favorite example is Web sites for wireless access in public places like airports. Having seen a “Wireless access available!” sign and knowing that it’s free at some airports, you open up your laptop, find a signal, and try to connect. But then you have to scan, read, and click your way through three pages, following links like “Wireless Access” and “Click here to connect” before you get to a page that even hints at what it might cost you. It feels like an old phone sales tactic: If they can just keep you on the line long enough and keep throwing more of their marketing pitch at you, maybe they can convince you along the way.
惩罚我不按你的方式做事。我永远不必考虑格式化数据:是否在我的社会安全号码中添加破折号,在我的信用卡号码中添加空格,或者在我的电话号码中添加括号。许多网站一反常态地坚持信用卡号码中不能有空格,而空格实际上可以让正确输入号码变得更加容易。不要因为你不想写一点代码而让我陷入困境。
Punishing me for not doing things your way. I should never have to think about formatting data: whether or not to put dashes in my Social Security number, spaces in my credit card number, or parentheses in my phone number. Many sites perversely insist on no spaces in credit card numbers, when the spaces actually make it much easier to type the number correctly. Don’t make me jump through hoops just because you don’t want to write a little bit of code.
向我询问你并不真正需要的信息。大多数用户对个人信息请求非常怀疑,如果网站要求的信息超出了当前任务所需的信息,他们会觉得很烦人。
Asking me for information you don’t really need. Most users are very skeptical of requests for personal information and find it annoying if a site asks for more than what’s needed for the task at hand.
又抽又抽我。我们总是在寻找虚假的诚意,而不真诚地试图让我相信你关心我可能会特别烦人。想一想每次听到“您的电话对我们很重要”时您的脑海中会想到什么。
Shucking and jiving me. We’re always on the lookout for faux sincerity, and disingenuous attempts to convince me that you care about me can be particularly annoying. Think about what goes through your head every time you hear “Your call is important to us.”
让我的方式变得嘶嘶作响。不得不费力地浏览充斥着自我感觉良好的营销照片的页面,这清楚地表明你不理解——或者不在乎——我很着急。
Putting sizzle in my way. Having to wade through pages bloated with feel-good marketing photos makes it clear that you don’t understand—or care—that I’m in a hurry.
你的网站看起来很业余。如果您的网站看起来邋遢、杂乱或不专业,就像没有付出任何努力使其美观一样,您可能会失去商誉。
Your site looks amateurish. You can lose goodwill if your site looks sloppy, disorganized, or unprofessional, like no effort has gone into making it presentable.
请注意,虽然人们喜欢对网站的外观发表评论(尤其是关于他们是否喜欢其颜色),但几乎没有人会仅仅因为网站看起来不太好而离开它。(我告诉人们在用户测试期间忽略用户对颜色所做的所有评论,除非四分之三的人使用像“puke”这样的词来描述配色方案。那么就值得重新考虑。2)
Note that while people love to make comments about the appearance of sites—especially about whether they like the colors—almost no one is going to leave a site just because it doesn’t look great. (I tell people to ignore all comments that users make about colors during a user test, unless three out of four people use a word like “puke” to describe the color scheme. Then it’s worth rethinking.2)
2 在我主持的一轮测试中,这种情况实际上发生过一次。我们改变了颜色。
2 This actually happened once during a round of testing I facilitated. We changed the color.
有时您可能会选择让您的网站故意执行一些对用户不友好的操作。有时,不完全按照客户的要求行事是有商业意义的。例如,不请自来的弹出窗口几乎总是在某种程度上惹恼人们。但是,如果您的统计数据显示您可以通过使用弹出窗口获得 10% 的额外收入,并且您认为值得烦扰您的用户,那么您就可以这样做。这是一个商业决策。请确保您以明智的方式进行操作,而不是无意中进行。
There may be times when you’ll choose to have your site do some of these user-unfriendly things deliberately. Sometimes it makes business sense not to do exactly what the customer wants. For instance, uninvited pop-ups almost always annoy people to some extent. But if your statistics show you can get 10 percent more revenue by using pop-ups and you think it’s worth annoying your users, you can do it. It’s a business decision. Just be sure you do it in an informed way, rather than inadvertently.
好消息是,即使你犯了错误,也可以通过做一些让我相信你确实把我的利益放在心上的事情来恢复我的善意。其中大部分只是其他列表的反面:
The good news is that even if you make mistakes, it’s possible to restore my goodwill by doing things that convince me that you do have my interests at heart. Most of these are just the flip side of the other list:
了解人们想要在您的网站上做的主要事情,并使它们变得明显且简单。通常不难弄清楚人们想在给定的网站上做什么。我发现,即使是那些对其组织网站的其他方面持不同意见的人,当我问他们“您的用户想做的三件主要事情是什么?”时,他们也几乎总是给出相同的答案。问题是,让这些事情变得简单并不总是成为应有的首要任务。(如果大多数人来到您的网站申请抵押贷款,那么没有什么可以妨碍让申请抵押贷款变得非常容易。)
Know the main things that people want to do on your site and make them obvious and easy. It’s usually not hard to figure out what people want to do on a given Web site. I find that even people who disagree about everything else about their organization’s site almost always give me the same answer when I ask them, “What are the three main things your users want to do?” The problem is, making those things easy doesn’t always become the top priority it should be. (If most people are coming to your site to apply for a mortgage, nothing should get in the way of making it dead easy to apply for a mortgage.)
告诉我我想知道什么。提前告知运输费用、酒店每日停车费、服务中断等任何您不想提前告知的事项。如果您的运费高于我的期望,您可能会失去积分,但您通常会因为坦诚并让我轻松补偿价格差异而获得足够的积分。
Tell me what I want to know. Be upfront about things like shipping costs, hotel daily parking fees, service outages—anything you’d rather not be upfront about. You may lose points if your shipping rates are higher than I’d like, but you’ll often gain enough points for candor and for making it easy for me to compensate for the price difference.
尽可能帮我节省步骤。例如,不要向我提供购买的运输公司的跟踪号码,而是在我的电子邮件收据中添加一个链接,该链接会打开他们的网站,并在我单击它时提交我的跟踪号码。(像往常一样,亚马逊是第一个为我做这件事的网站。)
Save me steps wherever you can. For instance, instead of giving me the shipping company’s tracking number for my purchase, put a link in my email receipt that opens their site and submits my tracking number when I click it. (As usual, Amazon was the first site to do this for me.)
付出努力吧。我最喜欢的例子是 HP 技术支持网站,该网站似乎投入了大量工作:(a) 生成解决问题所需的信息,(b) 确保其准确且有用,(c) 呈现清楚地显示,并且 (d) 组织它以便我可以找到它。我拥有很多 HP 打印机,几乎在所有遇到问题的情况下我都能自己解决。因此,我继续购买惠普打印机。
Put effort into it. My favorite example is the HP technical support site, where it seems like an enormous amount of work has gone into (a) generating the information I need to solve my problems, (b) making sure that it’s accurate and useful, (c) presenting it clearly, and (d) organizing it so I can find it. I’ve had a lot of HP printers, and in almost every case where I’ve had a problem I’ve been able to solve it on my own. As a result, I keep buying HP printers.
了解我可能有什么问题并回答它们。常见问题列表非常有价值,特别是如果
Know what questions I’m likely to have, and answer them. Frequently Asked Questions lists are enormously valuable, especially if
它们确实是常见问题解答,而不是伪装成常见问题解答的营销宣传(也称为 QWWPWA:我们希望人们会问的问题)。
They really are FAQs, not marketing pitches masquerading as FAQs (also known as QWWPWAs: Questions We Wish People Would Ask).
您让它们保持最新状态。客户服务和技术支持可以轻松地为您提供本周五个最常见问题的列表。我总是将此列表放在任何网站的支持页面的顶部。
You keep them up to date. Customer Service and Technical Support can easily give you a list of this week’s five most frequently asked questions. I would always put this list at the top of any site’s Support page.
他们很坦诚。人们常常会在常见问题解答中寻找您不希望他们问的问题的答案。在这些情况下,坦诚相待对于增加善意大有帮助。
They’re candid. Often people are looking in the FAQs for the answer to a question you’d rather they hadn’t asked. Candor in these situations goes a long way to increasing goodwill.
为我提供物质享受,例如适合打印的页面。有些人喜欢只需单击一下即可打印跨多个页面的故事,而 CSS 使创建适合打印的页面相对容易,几乎不需要额外的工作。删除广告(当横幅广告只是占用纸张空间时,除了令人厌烦之外产生任何影响的可能性更大),但不要删除插图、照片和图表。
Provide me with creature comforts like printer-friendly pages. Some people love being able to print stories that span multiple pages with a single click, and CSS makes it relatively easy to create printer-friendly pages with little additional effort. Drop the ads (the possibility of a banner ad having any impact other than being annoying is even greater when it’s just taking up space on paper), but don’t drop the illustrations, photos, and figures.
使从错误中恢复起来变得容易。如果您确实进行了足够的用户测试,那么您将能够在许多错误发生之前让我避免这些错误。但是,如果潜在的错误不可避免,请始终为我提供一种优雅、明显的恢复方式。
Make it easy to recover from errors. If you actually do enough user testing, you’ll be able to spare me from many errors before they happen. But where the potential for errors is unavoidable, always provide a graceful, obvious way for me to recover.
如有疑问,请道歉。有时您无法控制:您只是没有能力或资源来执行用户想要的操作(例如,您大学的图书馆系统要求每个目录数据库都有单独的密码,因此您无法为用户提供他们希望单次登录)。如果你不能做他们想做的事,至少让他们知道你知道你给他们带来了不便。
When in doubt, apologize. Sometimes you can’t help it: You just don’t have the ability or resources to do what the user wants (for instance, your university’s library system requires separate passwords for each of your catalog databases, so you can’t give users the single login they’d like). If you can’t do what they want, at least let them know that you know you’re inconveniencing them.
就在您以为大功告成时,一只背上绑着黄油吐司的猫飘过
JUST WHEN YOU THINK YOU’RE DONE, A CAT FLOATS BY WITH BUTTERED TOAST STRAPPED TO ITS BACK
当一只猫掉落时,它总是用脚着地,而当吐司掉落时,它总是以涂有黄油的一面朝下着地。我建议把涂了黄油的吐司绑在猫的背上;两者将在离地面几英寸的地方悬停、旋转。凭借巨大的黄油猫阵列,高速单轨列车可以轻松连接纽约和芝加哥。
When a cat is dropped, it always lands on its feet, and when toast is dropped, it always lands with the buttered side facing down. I propose to strap buttered toast to the back of a cat; the two will hover, spinning, inches above the ground. With a giant buttered-cat array, a high-speed monorail could easily link New York with Chicago.
——约翰·弗雷兹,发表于《不可重现结果杂志》
—JOHN FRAZEE, IN THE JOURNAL OF IRREPRODUCIBLE RESULTS
人们有时会问我:“可访问性怎么样?这不是可用性的一部分吗?”
People sometimes ask me, “What about accessibility? Isn’t that part of usability?”
当然,他们是对的。除非您要做出全面决定,残疾人不属于您的受众,否则您真的不能说您的网站可用,除非它是可访问的。
And they’re right, of course. Unless you’re going to make a blanket decision that people with disabilities aren’t part of your audience, you really can’t say your site is usable unless it’s accessible.
至此,每个参与 Web 设计的人都至少对 Web 可访问性有所了解。然而,我访问的几乎每个网站仍然未能通过我的三秒可访问性测试——增加字体的大小。1
At this point, everyone involved in Web design knows at least a little bit about Web accessibility. And yet almost every site I go to still fails my three-second accessibility test—increasing the size of the type.1
1 如果您要向我发送电子邮件,提醒我缩放已取代大多数浏览器中的文本大小,谢谢,但您可以保存这些击键。如果您使用缩放,每个网站都会变得更大,但只有超出固定大小字体(通常是使内容易于访问的努力的良好指标)的网站才会对文本大小做出响应。
1 If you’re about to send me email reminding me that Zoom has replaced Text Size in most browsers, thanks, but you can save those keystrokes. Every site gets larger if you use Zoom, but only sites that have moved beyond fixed-size fonts (usually a good indicator of effort to make things accessible) respond to Text Size.
前
Before
之后(没有区别)
After (no difference)
这是为什么?
Why is that?
在大多数组织中,最终负责有关可访问性的事情的人是实际构建该事物的人:设计师和开发人员。
In most organizations, the people who end up being responsible for doing something about accessibility are the people who actually build the thing: the designers and the developers.
当他们试图了解自己应该做什么时,无论他们拿起什么书籍或文章,都不可避免地列出了他们需要使网站易于访问的相同原因:
When they try to learn about what they should do, whatever books or articles they pick up inevitably list the same set of reasons why they need to make their sites accessible:
所有这些都有很多道理。不幸的是,还有很多事情不太可能让 22 岁的开发人员和设计师相信他们应该“实现无障碍”。有两个论点尤其容易引起他们的怀疑:
There’s a lot of truth in all of these. Unfortunately, there’s also a lot that’s unlikely to convince 22-year-old developers and designers that they should be “doing accessibility.” Two arguments in particular tend to make them skeptical:
___% 的人口患有残疾。由于他们的世界主要由身体健全的 22 岁年轻人组成,因此他们很难相信很大一部分人实际上需要帮助才能访问网络。他们愿意将其视为人们在倡导一项有价值的事业时所做的夸大其词,但也有一种自然的倾向认为,“如果他们的主张之一如此明显不真实,我有权对其余部分持怀疑态度。”
___% of the population has a disability. Since their world consists largely of able-bodied 22-year-olds, it’s very hard for them to believe that a large percentage of the population actually needs help accessing the Web. They’re willing to write it off as the kind of exaggeration that people make when they’re advocating for a worthy cause, but there’s also a natural inclination to think, “If one of their claims is so clearly untrue, I’m entitled to be skeptical about the rest.”
让事情变得更容易让每个人受益。他们知道有些改编确实可以,就像经典的例子,隐藏式字幕,对于能听到的人来说通常会派上用场。2但由于这似乎总是作为唯一引用的例子,感觉有点像争论太空计划是值得的,因为它给了我们唐。3开发人员和设计人员更容易想象可访问性调整可能会让“其他人”的情况变得更糟的情况。
Making things more accessible benefits everyone. They know that some adaptations do, like the classic example, closed captioning, which does often come in handy for people who can hear.2 But since this always seems to be the only example cited, it feels a little like arguing that the space program was worthwhile because it gave us Tang.3 It’s much easier for developers and designers to imagine cases where accessibility adaptations are likely to make things worse for “everyone else.”
2 例如,梅兰妮和我在观看英国电影时经常使用它。
2 Melanie and I often use it when watching British films, for instance.
3 一种粉状橙味早餐饮料,为宇航员发明(另见:冻干食品)。
3 A powdered orange-flavored breakfast drink, invented for the astronauts (see also: freeze-dried food).
这种怀疑论最糟糕的是它掩盖了这样一个事实:实际上只有一个原因是重要的:
The worst thing about this skepticism is that it obscures the fact that there’s really only one reason that’s important:
这是正确的做法。而且不仅仅是正确的事情;这绝对是一件正确的事情,因为关于可访问性的一个争论并不常见,那就是它如何使某些人的生活变得更加美好。就我个人而言,我认为任何人都不应该需要比这个例子更多的内容:能够使用计算机的盲人现在可以自己阅读几乎任何报纸或杂志。想象一下。
It’s the right thing to do. And not just the right thing; it’s profoundly the right thing to do, because the one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. Personally, I don’t think anyone should need more than this one example: Blind people with access to a computer can now read almost any newspaper or magazine on their own. Imagine that.
我们有多少机会仅仅通过把工作做得更好一点就能显着改善人们的生活?
How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?
对于那些觉得这个论点没有说服力的人,请注意,即使你还没有遇到过,迟早会有立法棒到来。相信它。
And for those of you who don’t find this argument compelling, be aware that even if you haven’t already encountered it, there will be a legislative stick coming sooner or later. Count on it.
当他们更多地了解可访问性时,往往会出现两种恐惧:
As they learn more about accessibility, two fears tend to emerge:
更多的工作。特别是对于开发人员来说,可访问性似乎只是一项更复杂的新事物,以适应已经不可能的项目进度。在最坏的情况下,它会作为一项“倡议”从上面下达,并伴有耗时的报告、审查和工作组会议。
More work. For developers in particular, accessibility can seem like just one more complicated new thing to fit into an already impossible project schedule. In the worst case, it gets handed down as an “initiative” from above, complete with time-consuming reports, reviews, and task force meetings.
妥协的设计。设计师最担心的是我所说的“黄油猫”:为残疾人提供的良好设计和为其他人提供的良好设计将直接对立。他们担心自己将被迫设计对大多数受众来说吸引力较小且实用性较差的网站。
Compromised design. What designers fear most is what I refer to as buttered cats: places where good design for people with disabilities and good design for everyone else are going to be in direct opposition. They’re worried that they’re going to be forced to design sites that are less appealing—and less useful—for the majority of their audience.
在理想的世界中,无障碍功能就像我在芝加哥出租车后面看到的标志一样。乍一看,它只是一个普通的标志。但它捕捉光线的方式让我仔细观察,当我仔细观察时,我意识到它是巧妙的。
In an ideal world, accessibility would work like a sign I saw in the back of a Chicago taxi. At first it looked like an ordinary sign. But something about the way it caught the light made me take a closer look, and when I did, I realized that it was ingenious.
标牌上覆盖着一块薄薄的有机玻璃,信息以盲文浮雕在有机玻璃上。通常,印刷品和盲文都会有一半大,以便它们都能适合标牌,但通过这种设计,每个观众都可以获得最佳的体验。这是一个优雅的解决方案。
The sign was overlaid with a thin piece of Plexiglas, and the message was embossed in Braille on the Plexiglas. Ordinarily, both the print and the Braille would have been half as large so they could both fit on the sign, but with this design each audience got the best possible experience. It was an elegant solution.
但我认为,对于一些设计师来说,无障碍性会让人联想到类似于冯内古特短篇小说的形象,即政府通过阻碍每个人来创造平等。4
I think for some designers, though, accessibility conjures up an image something like the Vonnegut short story where the government creates equality by handicapping everyone.4
4 在《哈里森·伯杰龙》中,主角的智力“远远高于正常人”,法律要求他在耳中佩戴“智障收音机”,每隔 20 秒就会发出各种巨响,“以防止像乔治这样的人受到干扰”。不公平地利用他们的大脑。”
4 In “Harrison Bergeron,” the main character, whose intelligence is “way above normal,” is required by law to wear a “mental handicap radio” in his ear that blasts various loud noises every 20 seconds “to keep people like George from taking unfair advantage of their brains.”
当人们开始阅读有关可访问性的内容时,他们通常会遇到一条听起来非常有希望的建议:
When people start reading about accessibility, they usually come across one piece of advice that sounds very promising:
问题是,当他们通过验证器运行网站时,结果发现它更像是语法检查器而不是拼写检查器。是的,它确实发现了一些易于修复的明显错误和疏忽,例如缺少替代文本。5但它也不可避免地会出现一系列模糊的警告,提示您可能做错了什么,并列出一长串建议供您检查,以确保它承认可能根本没有问题。
The problem is, when they run their site through a validator, it turns out to be more like a grammar checker than a spell checker. Yes, it does find some obvious mistakes and oversights that are easy to fix, like missing alt text.5 But it also inevitably turns up a series of vague warnings that you may be doing something wrong and a long list of recommendations of things for you to check that it admits may not be problems at all.
5 Alt 文本提供图像的文本描述(例如,“帆船上两个人的图片”),这对于使用屏幕阅读器或在关闭图像的情况下浏览的人来说至关重要。
5 Alt text provides a text description of an image (“Picture of two men on a sailboat,” for example), which is essential for people using screen readers or browsing with images turned off.
对于刚刚学习可访问性的人来说,这可能会非常令人沮丧,因为长长的列表和模糊的建议表明有很多东西需要学习。
This can be very discouraging for people who are just learning about accessibility, because the long lists and ambiguous advice suggest that there’s an awful lot to learn.
事实是,让网站变得可访问比应有的困难得多。
And the truth is, it’s a lot harder than it ought to be to make a site accessible.
毕竟,大多数设计师和开发人员不会成为无障碍专家。如果网络可访问性要变得无处不在,那么它就必须变得更容易做到。屏幕阅读器和其他自适应技术必须变得更加智能,构建网站的工具(如 Dreamweaver)必须更容易正确编码以实现可访问性,并且我们的设计流程需要更新,以从一开始就考虑可访问性。
After all, most designers and developers are not going to become accessibility experts. If Web accessibility is going to become ubiquitous, it’s going to have to be easier to do. Screen readers and other adaptive technologies have to get smarter, the tools for building sites (like Dreamweaver) have to make it easier to code correctly for accessibility, and our design processes need to be updated to include thinking about accessibility from the beginning.
然而,目前世界并不完美,这一事实并不能让我们任何人摆脱困境。
The fact that it’s not a perfect world at the moment doesn’t let any of us off the hook, though.
即使使用当前的技术和标准,通过专注于一些影响最大的事情,也可以使任何网站都易于访问,而无需付出巨大的努力。而且它们并不涉及靠近一只涂了黄油的猫。
Even with current technology and standards, it’s possible to make any site very accessible without an awful lot of effort by focusing on a few things that will have the most impact. And they don’t involve getting anywhere near a buttered cat.
我对 Tang 的论点感到恼火的一件事(“让网站易于访问使它们对每个人都更可用”)是它掩盖了一个事实,即事实恰恰相反:让网站对“我们其他人”更可用是使它们对残疾人更有效的最有效方法之一。
One of the things that I find annoying about the Tang argument (“making sites accessible makes them more usable for everyone”) is that it obscures the fact that the reverse actually is true: Making sites more usable for “the rest of us” is one of the most effective ways to make them more effective for people with disabilities.
如果某件事让大多数使用您网站的人感到困惑,那么几乎肯定也会让有可访问性问题的用户感到困惑。(毕竟,人们不会仅仅因为有残疾就突然变得非常聪明。)而且他们很可能会更难从困惑中恢复过来。
If something confuses most people who use your site, it’s almost certain to confuse users who have accessibility issues. (After all, people don’t suddenly become remarkably smarter just because they have a disability.) And it’s very likely that they’re going to have a harder time recovering from their confusion.
例如,回想一下您上次在使用网站时遇到问题(例如,在提交表单时遇到令人困惑的错误消息)。现在想象一下在无法看到该页面的情况下尝试解决该问题。
For instance, think of the last time you had trouble using a Web site (running into a confusing error message when you submitted a form, for example). Now imagine trying to solve that problem without being able to see the page.
要提高网站的可访问性,您可以做的最好的事情就是经常对其进行测试,并不断消除让每个人感到困惑的部分。事实上,如果您不首先这样做,无论您如何严格地应用辅助功能指南,残障人士仍然无法使用您的网站。如果一开始就不清楚,那么修复代码问题就像[在这里插入你最喜欢的给猪涂口红的比喻]。
The single best thing you can do to improve your site’s accessibility is to test it often, and continually smooth out the parts that confuse everyone. In fact, if you don’t do this first, no matter how rigorously you apply accessibility guidelines, people with disabilities still won’t be able to use your site. If it’s not clear to begin with, just fixing code problems is like [insert your favorite putting-lipstick-on-a-pig metaphor here].
正如我希望您现在已经看到的那样,学习如何使任何东西变得更有用的最佳方法是观察人们实际尝试使用它。但我们大多数人都没有使用自适应技术的经验,更不用说观看其他人使用它了。
As I hope you’ve seen by now, the best way to learn how to make anything more usable is to watch people actually try to use it. But most of us have no experience at using adaptive technology, let alone watching other people use it.
如果您有时间和动力,我强烈建议您找到一两个盲人网络用户,并花几个小时与他们一起观察他们实际如何使用屏幕阅读器软件。
If you have the time and the motivation, I’d highly recommend locating one or two blind Web users and spending a few hours with them observing how they actually use their screen reader software.
幸运的是,有人已经为您完成了繁重的工作。Mary Theofanos 和 Janice (Ginny) Redish 观察了 16 名盲人用户使用屏幕阅读器在各种网站上执行多项任务,并在题为“可访问和可用网站指南:观察使用屏幕阅读器的用户”的文章中报告了他们的观察结果读者们。” 6
Fortunately, someone has done the heavy lifting for you. Mary Theofanos and Janice (Ginny) Redish watched 16 blind users using screen readers to do a number of tasks on a variety of sites and reported what they observed in an article titled “Guidelines for Accessible and Usable Web Sites: Observing Users Who Work with Screen Readers.”6
6 发表于 ACM 杂志Interactions(2003 年 11 月至 12 月)。经 ACM 许可,Ginny 已将其提供给个人使用:redish.net/images/stories/PDF/InteractionsPaperAuthorsVer.pdf。是的,它已有十年历史,但仍然具有现实意义。
6 Published in the ACM magazine Interactions (November-December 2003). With permission from ACM, Ginny has made it available for personal use at redish.net/images/stories/PDF/InteractionsPaperAuthorsVer.pdf. Yes, it’s ten years old, but it’s still relevant.
与任何类型的用户测试一样,它产生了宝贵的见解。以下是他们学到的一些东西的一个例子:
As with any kind of user testing, it produced invaluable insights. Here’s one example of the kinds of things they learned:
屏幕阅读器用户用耳朵进行扫描。大多数盲人用户和大多数视力正常的用户一样不耐烦。他们希望尽快获得所需的信息。他们不会听页面上的每个单词,就像视力正常的用户不会阅读每个单词一样。他们“用耳朵扫描”,听足够的内容来决定是否进一步倾听。许多人将声音设置为以惊人的速度说话。
Screen-reader users scan with their ears. Most blind users are just as impatient as most sighted users. They want to get the information they need as quickly as possible. They do not listen to every word on the page—just as sighted users do not read every word. They “scan with their ears,” listening to just enough to decide whether to listen further. Many set the voice to speak at an amazingly rapid rate.
他们聆听链接或文本行的前几个单词。如果看起来不相关,他们会快速移动到下一个链接、下一行、下一个标题、下一个段落。视力正常的用户可能通过扫描整个页面来找到关键字,而盲人用户可能听不到该关键字(如果该关键字不在链接或文本行的开头)。
They listen to the first few words of a link or line of text. If it does not seem relevant, they move quickly to the next link, next line, next heading, next paragraph. Where a sighted user might find a keyword by scanning over the entire page, a blind user may not hear that keyword if it is not at the beginning of a link or a line of text.
我建议您在阅读有关辅助功能的其他内容之前先阅读本文。在 20 分钟内,它会让您对您正在尝试解决的问题有一个欣赏,这是您从任何其他文章或书籍中无法获得的。
I recommend that you read this article before you read anything else about accessibility. In 20 minutes, it will give you an appreciation for the problems you’re trying to solve that you won’t get from any other articles or books.
读完 Ginny 和 Mary 的文章后,您就可以花一个周末阅读一本有关 Web 可访问性的书了。这两个特别好:
After you’ve read Ginny and Mary’s article, you’re ready to spend a weekend reading a book about Web accessibility. These two are particularly good:
适合所有人的网络:设计可访问的用户体验,作者:Sarah Horton 和 Whitney Quesenbery。(他们的方法是:“良好的用户体验等于良好的可访问性。以下是如何做到这两点。”)
A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery. (Their approach: “Good UX equals good accessibility. Here’s how to do both.”)
Web 可访问性: Jim Thatcher 等人的Web 标准和法规遵从性。(“这是法律和法规,我们将帮助您了解如何满足这些要求。”)
Web Accessibility: Web Standards and Regulatory Compliance by Jim Thatcher et al. (“Here are the laws and regulations, and we’ll help you understand how to meet them.”)
这些书涵盖了很多内容,因此不必担心无法吸收所有内容。现在,您只需要了解全局即可。
These books cover a lot of ground, so don’t worry about absorbing all of it. For now, you just need to get the big picture.
现在您已准备好执行大多数人认为的 Web 可访问性:在页面中实施特定更改。
Now you’re ready to do what most people think of as Web accessibility: implementing specific changes in your pages.
截至目前,这些可能是最重要的事情:
As of right now, these are probably the most important things to do:
为每个图像添加适当的替代文本。为屏幕阅读器应忽略的图像添加空(或“空”)alt 属性 (
<alt="">),并为其余图像添加有用的描述性文本。
Add appropriate alt text to every image. Add an empty (or “null”) alt attribute (<alt="">) for images that screen readers should ignore, and add helpful, descriptive text for the rest.
要学习如何编写好的替代文本(实际上是学习如何执行此列表中的任何操作),请访问webaim.org。WebAIM 的人员撰写了出色的实用文章,涵盖了几乎所有可访问性技术的具体细节。
To learn how to write good alt text—and in fact to learn how to do any of the things in this list—head over to webaim.org. The folks at WebAIM have written excellent practical articles covering the nuts-and-bolts details of almost every accessibility technique.
正确使用标题。标准 HTML 标题元素向使用屏幕阅读器的用户传达有关内容逻辑组织的有用信息,并使他们更容易通过键盘进行导航。用于
<h1>页面标题或主要内容标题,< h2> 用于主要部分标题、h3副标题的 < > 等等,然后使用 CSS 重新定义每个级别的视觉外观。
Use headings correctly. The standard HTML heading elements convey useful information about the logical organization of your content to people using screen readers and make it easier for them to navigate via the keyboard. Use <h1> for the page title or main content heading, <h2> for the major section headings, <h3> for subheadings, and so on, and then use CSS to redefine the visual appearance of each level.
让您的表单与屏幕阅读器配合使用。这很大程度上归结为使用 HTML
<label>元素将字段与其文本标签关联起来,以便人们知道他们应该输入什么。
Make your forms work with screen readers. This largely boils down to using the HTML <label> element to associate the fields with their text labels, so people know what they’re supposed to enter.
在每个页面的开头放置一个“跳到主要内容”链接。想象一下,您必须花 20 秒(或一分钟或两分钟)聆听每个页面顶部的全局导航,然后才能查看内容,您就会明白为什么这很重要。
Put a “Skip to Main Content” link at the beginning of each page. Imagine having to spend 20 seconds (or a minute, or two) listening to the global navigation at the top of every page before you could look at the content, and you’ll understand why this is important.
使所有内容都可以通过键盘访问。请记住,并非每个人都会使用鼠标。
Make all content accessible by keyboard. Remember, not everyone can use a mouse.
在文本和背景之间创建显着的对比。例如,切勿在深灰色背景上使用浅灰色文本。
Create significant contrast between your text and background. Don’t ever use light grey text on a dark grey background, for instance.
使用易于访问的模板。例如,如果您使用 WordPress,请确保您选择的主题已设计为易于访问。
Use an accessible template. If you’re using WordPress, for example, make sure that the theme you choose has been designed to be accessible.
就是这样。随着您的继续,您可能会学到如何做更多的事情,但即使您只做我在这里介绍的内容,您也会有一个非常好的开始。
That’s it. You’ll probably learn how to do a lot more as you go along, but even if you do only what I’ve covered here, you’ll have made a really good start.
七年前我写这一章时,是这样结束的:
When I wrote this chapter seven years ago, it ended with this:
希望五年后我能够删除本章并将空间用于其他用途,因为开发人员工具、浏览器、屏幕阅读器和指南都将成熟并集成到人们可以构建可访问网站的程度不假思索。
Hopefully in five years I’ll be able to just remove this chapter and use the space for something else because the developer tools, browsers, screen readers, and guidelines will all have matured and will be integrated to the point where people can build accessible sites without thinking about it.
叹。
Sigh.
希望这次我们能有更好的运气。
Hopefully we’ll have better luck this time.
1《困惑者指南》(真正的指南)是由拉比 Moshe ben Maimon(更广为人知的名字为迈蒙尼德)于 12 世纪撰写的对《塔木德》含义的开创性评论。我一直认为这是我听过的最好的标题。
1 The Guide for the Perplexed (the real one) is a seminal commentary on the meaning of the Talmud written in the 12th century by Rabbi Moshe ben Maimon (better known as Maimonides). I’ve just always thought it was the best title I’ve ever heard.
让可用性发生在您居住的地方
MAKING USABILITY HAPPEN WHERE YOU LIVE
I am the Lorax. I speak for the trees.
—洛拉克斯博士 SEUSS
—THE LORAX, DR. SEUSS
我收到很多人发来的电子邮件,问我这个问题的一些变体:
I get a lot of email from people asking me some variation of this question:
好的我明白了。这个可用性的东西很重要,我真的很想自己努力。我如何说服我的老板和他的老板他们应该认真对待用户并允许我花时间实现这一目标?
OK, I get it. This usability stuff is important, and I really want to work on it myself. How do I convince my boss—and his boss—that they should be taking users seriously and allow me to spend time making it happen?
如果您发现自己所处的环境不支持您“实现可用性”的愿望,您该怎么办?
What can you do if you find yourself in an environment where your desire to “do usability” isn’t supported?
首先,介绍一下可用性在世界上的地位如何发生变化的一些背景知识。
First, a little background about how the place of usability in the world has changed.
早在 20 世纪 90 年代末,可用性和以用户为中心的设计 (UCD) 是大多数人用来描述以用户为中心的设计工作的术语。本质上有两个“专业”专注于使网站更可用:可用性(确保事物的设计方式使人们能够成功使用它们)和信息架构(确保内容的组织方式允许人们成功地使用它们)人们找到他们需要的东西)。
Back in the late 1990s, Usability and User Centered Design (UCD) were the terms most people used to describe any efforts to design with the user in mind. And there were essentially two “professions” that focused on making Web sites more usable: Usability (making sure things are designed in a way that enables people to use them successfully) and Information Architecture (making sure the content is organized in a way that allows people to find what they need).
现在你最常听到的术语是用户体验设计,或者只是用户体验(简称UXD或UX),并且可能涉及十几个专业,例如交互设计、界面设计、视觉设计和内容管理,并且,当然,可用性和信息架构——全部都在用户体验的范畴内。
Now the term you hear most often is User Experience Design, or just User Experience (UXD or UX, for short), and there are probably a dozen specialties involved, like Interaction Design, Interface Design, Visual Design, and Content Management—and, of course, Usability and Information Architecture—all under the UX umbrella.
以用户为中心的设计和用户体验设计之间的区别之一是它们的范围。UCD 专注于设计正确的产品并确保其可用。用户体验将其角色视为在每个阶段都考虑用户的需求从他们在电视上看到广告开始,到购买产品并在线跟踪其交付,甚至将其退回当地分店。
One difference between User Centered Design and User Experience Design is their scope. UCD focused on designing the right product and making sure that it was usable. UX sees its role as taking the users’ needs into account at every stage of the product life cycle, from the time they see an ad on TV, through purchasing it and tracking its delivery online, and even returning it to a local branch store.
好消息是,现在人们越来越意识到关注用户的重要性。史蒂夫·乔布斯(和乔纳森·艾维)为用户体验提出了一个非常引人注目的商业案例,因此可用性比几年前更容易推销。
The good news is that there’s a lot more awareness now of the importance of focusing on the user. Steve Jobs (and Jonathan Ive) made a very compelling business case for UX, and as a result usability is an easier sell than it was even a few years ago.
坏消息是,可用性曾经是用户友好设计的标准,现在却有很多兄弟姐妹在寻找席位,每个人都相信自己的工具集是最适合这项工作的工具。更糟糕的消息是,没有多少人了解专业之间的差异或他们可以做出的独特贡献。
The bad news is that where usability used to be the standard bearer for user-friendly design, now it’s got a lot of siblings looking for seats at the table, each convinced that their set of tools are the best ones for the job. The worse news is that not many people understand the differences between the specialties or the unique contributions they can make.
这就是你正在打球的场地。因此,当有人告诉你:“我在 UX 领域”或“可用性在 2002 年就已经如此了——现在都是 UX 了”,请礼貌地微笑并问他们一些问题,了解他们如何了解用户,如何测试人们是否可以使用他们正在构建的内容以及他们如何实现更改。如果他们不做任何这些事情,他们就需要你的帮助。如果他们这样做,请向他们学习。重要的不是我们如何称呼自己,而是我们带来的态度和我们可以贡献的技能。
This is the field you’re playing on. So when someone tells you: “I’m in UX” or “Usability is so 2002—it’s all UX now,” smile graciously and ask them a few questions about how they’re learning about users, how they’re testing whether people can use what they’re building, and how they get changes to happen. If they don’t do any of those things, they need your help. If they do, learn from them. It’s not what we call ourselves that matters, it’s the attitude we bring and the skills we can contribute.
以下是我经常听到的两条建议,用于说服管理层支持(并资助)可用性工作:
Here are the two suggestions I’ve always heard for convincing management to support (and fund) usability work:
展示投资回报率。通过这种方法,您可以收集和分析数据,以证明您所做的可用性更改可以节省成本或增加收入(“更改此按钮上的标签使销售额增加了 0.25%”)。有一本关于此的优秀书籍:Randolph Bias 和 Deborah Mayhew 编辑的Cost-justifying Usability: An Update for the Internet Age 。
Demonstrate ROI. In this approach, you gather and analyze data to prove that a usability change you’ve made resulted in cost savings or additional revenue (“Changing the label on this button increased sales by 0.25%”). There’s an excellent book about it: Cost-justifying Usability: An Update for the Internet Age, edited by Randolph Bias and Deborah Mayhew.
说他们的语言。不要谈论给用户带来的好处,而是了解当前令人烦恼的企业问题是什么,并以一种明确的方式描述您的努力,表明它们是解决方案的一部分:谈论诸如痛点、接触点、KPI 和CSI 或您组织中流行的任何管理流行语。
Speak their language. Instead of talking about the benefits for users, learn what the current vexing corporate problems are and describe your efforts in a way that makes it clear that they’re part of the solution: Talk about things like pain points, touch points, KPIs, and CSI, or whatever management buzzwords are trending in your organization.
这些都是好主意,如果你能做到的话,就值得去做。但是,将投资回报率与成本和收入挂钩可能需要大量工作,除非严格实施,否则总会有人声称附加值是由其他因素造成的。学习说“生意”也可能具有挑战性。这就是 MBA 学位的用途。
These are both fine ideas and worth doing if you can manage it. But making an ROI case tied to costs and revenues can be a lot of work, and unless it’s rigorously implemented there’ll always be someone who’ll claim that the added value was caused by something else. And learning to speak “business” can be challenging, too. That’s what MBA degrees are for.
……我会在你的岗位上工作大约一周。每次我去客户的办公室时,我大部分时间都在惊叹有这么多人可以在企业界生存。我只是没有能力处理大型(即超过两人)组织中的办公室政治和整天开会。
...I’d last about a week at your job. Every time I go to a client’s office I spend most of my time marveling at the fact that so many people can survive in the corporate world. I’m just not equipped for dealing with the office politics in a large (i.e., more than two people) organization and sitting in meetings all day.
但我花了相当多的时间参观公司办公室并让经理们认真对待可用性。所以我确实有一些关于有效策略的想法,尝试过这些策略的人告诉我他们已经取得了一些成功。如果我是你,我会这样做:
But I have spent a fair amount of time visiting corporate offices and getting managers to take usability seriously. So I do have some ideas about tactics that work, and people who have tried them tell me they’ve had some success. So here’s what I’d do if I were you:
让你的老板(和她的老板)观看可用性测试。我认为最有效的策略是让食物链高层的人们来观察哪怕一项可用性测试。告诉他们您将要做一些测试,如果他们能花几分钟的时间来进行测试,这对提高 Web 团队的士气会很有帮助。
Get your boss (and her boss) to watch a usability test. The tactic that I think works best is getting people from higher up the food chain to come and observe even one usability test. Tell them that you’re going to be doing some testing and it would be great for the Web team’s morale if they could just poke their head in for a few minutes.
根据我的经验,高管们常常会变得着迷,并且停留的时间比他们计划的要长,因为这是他们第一次看到有人尝试使用公司的网站,而且它通常并不像他们想象的那么漂亮。
In my experience, executives often become fascinated and stay longer than they’d planned, because it’s the first time they’ve seen anyone try to use the company’s site and it’s often not nearly as pretty a picture as they’d imagined.
让他们亲自来很重要。观看现场可用性测试和听到有关它的演示之间的区别就像观看正在发生的体育赛事与听晚间新闻重述之间的区别一样。现场游戏创造难忘的体验;晚间新闻不多。
It’s important to get them to come in person. The difference between watching a usability test live and hearing a presentation about it is like the difference between watching a sporting event while it’s happening versus listening to a recap of it on the evening news. Live games create memorable experiences; the evening news not so much.
如果你不能让他们来,那就退而求其次:在你的演示中加入测试的精彩片段。如果您无法进行演示,请在您的内部网上发布一个短片(少于 3 分钟),并发送包含有趣的描述和视频链接的电子邮件。就连高管也喜欢看短视频。
If you can’t get them to come, then settle for second best: include clips of highlights from tests in your presentations. If you don’t get to do a presentation, post a short clip (less than 3 minutes) on your intranet and send out email with an intriguing description and a link to the video. Even executives like watching short videos.
用你自己的时间做第一个。当您进行第一次测试时,不要征求许可;只需保持极其简单和非正式,并为参与者寻找志愿者,这样就不需要任何费用。
Do the first one on your own time. When you do your first test, don’t ask for permission; just keep it incredibly simple and informal, and find volunteers for participants so it doesn’t cost anything.
并尝试确保结果有所改善。选择一个简单的目标来测试 - 您知道至少有一个严重的可用性问题,可以快速修复,而无需让很多人签署更改 - 例如,重命名一个标签不良的按钮。然后测试它,修复它,并公布它。
And try to make sure that something improves as a result. Pick an easy target to test—something that you know has at least one serious usability problem that can be fixed quickly without having to get a lot of people to sign off on the change—renaming a poorly labeled button, for instance. Then test it, fix it, and publicize it.
如果您能找到一种简单的方法来衡量改进,那就这样做。例如,您可能会测试导致大量支持电话的问题,然后显示在解决问题后有关该问题的电话减少了多少。
If you can find a simple way to measure the improvement, do so. For instance, you might test something that’s been causing a lot of support calls and then show how much the calls on that issue decreased after you fixed the problem.
进行比赛测试。我在第 9 章中提到,在任何项目开始时测试一些有竞争力的网站是个好主意。但这也是争取测试支持的好方法。每个人都喜欢了解竞争情况,而且因为测试的不是您的网站,所以没有人会承担任何个人风险。这是一场很棒的棕色袋午餐活动。
Do a test of the competition. I mentioned in Chapter 9 that it’s a good idea to test some competitive sites at the start of any project. But it’s also a great way to drum up support for testing. Everybody loves learning about the competition, and because it’s not your site being tested, no one has anything personally on the line. It makes a great brown bag lunch event.
与管理层同理心。几年前,在 UXPA 年会上,我环顾四周,心想:“多么好的一群人啊!” 然后我突然意识到:他们当然很好。同理心实际上是可用性工作的专业要求。如果你有兴趣这样做,你可能也会有同理心。我建议你将这种同理心运用到你的老板身上。不是“我怎样才能弄清楚这些人的动机是什么,这样我就能让他们做我想做的事”,而是“理解他们所处的位置”,对他们有真正的、情感上的同理心。您可能会对效果感到惊讶。
Empathize with management. A few years ago at the UXPA annual conference, I looked around and thought “What a nice group of people!” Then it dawned on me: of course they’re nice. Empathy is virtually a professional requirement for usability work. And if you’re interested in doing it, you’re probably empathetic too. I recommend that you apply that empathy to your bosses. Not in the “how can I figure out what motivates these people so I can get them to do what I want” way, but more in the “understand the position they find themselves in” way, having real, emotional empathy for them. You may be surprised by the effect.
了解自己在宏伟计划中的位置。就你个人而言,在你所处的情况下,我认为一点点谦虚会有很大帮助。现实情况是,在商业世界中,几乎每个人都只是众多齿轮中的一个很小的齿轮。2
Know your place in the grand scheme of things. Personally, in the situation you’re in, I think a little bit of humility goes a long way. The reality is that in the business world almost everyone is just a very small cog in a huge collection of cogs.2
2 对不起。尽量不要把它当成是针对你个人的。做好工作。享受您的家居生活。要开心。
2 Sorry. Try not to take it personally. Do good work. Enjoy your home life. Be happy.
你希望你对可用性的热情具有感染力,但以将真相(关于可用性或其他任何事情)带给普通群众的态度是行不通的。您的主要角色应该是分享您所知道的内容,而不是告诉人们应该如何做事情。
You want your enthusiasm for usability to be infectious, but it just doesn’t work to go around with the attitude that you’re bringing the truth—about usability, or anything else—to the unwashed masses. Your primary role should be to share what you know, not to tell people how things should be done.
我还推荐两本可以提供帮助的书。
I’d also recommend two books that can help.
首先是 Tomer Sharon 的《这是我们的研究:获得利益相关者对用户体验研究项目的支持》。Tomer 是 Google 的用户体验研究员,我从未听过他说过任何不真实、不简洁、不可行的话。
First there’s Tomer Sharon’s It’s Our Research: Getting Stakeholder Buy-In for User Experience Research Projects. Tomer is a UX Researcher at Google, and I’ve never heard him say anything that wasn’t true, pithy, and actionable.
任何标题为“成为理性的声音”和“接受可能行不通但没关系”的书显然都值得一读。
Any book with section titles like “Become the voice of reason” and “Accept the fact that it might not work and that it’s okay” is obviously worth reading.
Leah Buley 的《一个人的用户体验团队:研究和设计生存指南》是专门为那些“公司中唯一实践(或渴望实践)以用户为中心的设计的人”或“经常在一个团队中工作的人”编写的。是唯一的用户体验人员。” 第 3 章(为你的工作建立支持)和第 4章(自我成长和职业发展)充满了好的建议和有用的资源。
Leah Buley’s The User Experience Team of One: A Research and Design Survival Guide is written specifically for people who are “the only person in your company practicing (or aspiring to practice) user centered design” or who “regularly work on a team where you are the only UX person.” Chapters 3 (Building Support for Your Work) and 4 (Growing Yourself and Your Career) are full of good advice and useful resources.
从本质上讲,可用性是一项用户倡导工作:就像 Lorax 一样,你为树木代言。好吧,实际上是用户。可用性是通过构建更好的产品来更好地为人们服务。
Usability is, at its heart, a user advocate job: Like the Lorax, you speak for the trees. Well, the users, actually. Usability is about serving people better by building better products.
但有一种趋势——我大约五年前第一次注意到——有些人3试图让可用性实践者帮助他们弄清楚如何操纵用户而不是满足他们的需求。4
But there’s a trend—which I first noticed about five years ago—for some people3 to try to get usability practitioners to help them figure out how to manipulate users rather than serve their needs.4
3 [咳]营销[咳]
3 [cough] marketing [cough]
4 甚至还有 Chris Nodder 写的一本名为《设计之恶:交互设计引导我们陷入诱惑》的书,其中解释了对人类弱点的理解如何指导您的设计决策。每一章都涉及七大罪之一(暴食、傲慢、懒惰等)。
4 There’s even a book called Evil by Design: Interaction Design to Lead Us into Temptation by Chris Nodder that explains how an understanding of human frailties can guide your design decisions. Each chapter deals with one of the Seven Deadly Sins (Gluttony, Pride, Sloth, and so on).
我对人们寻求我们的帮助来影响用户的想法没有意见。
I have no problem with the idea of people asking for our help influencing users.
如果你想知道如何影响别人,只需阅读罗伯特·西奥迪尼(Robert Cialdini)关于该主题的经典著作《影响力:说服心理学》。它聪明而有效,充满了经过时间考验的想法。
If you want to know how to influence people, just read Robert Cialdini’s classic book on the subject, Influence: The Psychology of Persuasion. It’s brilliant and effective, full of time-proven ideas.
或者阅读 Susan Weinschenk 的任何一本书,了解神经心理学研究可以教给我们关于人类动机和决策的有用教训。
Or read any of Susan Weinschenk’s books about the useful lessons that neuropsychology research can teach us about human motivation and decision making.
我也不介意帮助说服人们做事,只要不是欺骗性的。可用性测试中的出声思考协议通常可以产生有价值的见解,了解说服尝试成功或失败的原因。
I don’t have a problem with helping to persuade people to do things, either, as long as it’s not deceptive. The think-aloud protocol in usability tests can often produce valuable insights into why attempts at persuasion succeed or fail.
但每当我听到人们谈论使用可用性测试来帮助确定某些东西是否令人满意时,我都会感到焦虑,因为可用性测试不利于衡量。在测试过程中,您可能会感觉到参与者发现了一些想要的东西,但这只是一种感觉。某件事是否令人满意是一个市场研究问题,最好通过使用市场研究工具和仪器来回答。
But I get anxious whenever I hear people talk about using usability tests to help determine whether something is desirable, because it’s just not something usability tests are good for measuring. You may get a sense during a test session that the participant finds something desirable, but it’s just that: a sense. Whether something is desirable is a market research question, best answered by using market research tools and instruments.
真正的问题是,这些人通常并没有真正寻求我们的帮助来确定某件事是否令人满意,甚至没有寻求帮助来弄清楚如何使他们生产的产品更令人满意。相反,他们寻求可用性来告诉他们如何让人们认为这是可取的,即操纵他们。
The real problem is that these people often aren’t actually asking for our help determining whether something is desirable, or even for help in figuring out how to make what they produce more desirable. Instead, they’re looking to usability to tell them how to make people think it’s desirable, i.e., to manipulate them.
有时,预期的操作相对良性,例如使用默认选中的稍微隐藏的复选框来自动注册时事通讯。
Sometimes the intended manipulation is relatively benign, like using a slightly hidden checkbox checked by default to automatically sign you up for a newsletter.
有时它离黑暗更近了一步,会做一些事情,比如诱骗人们安装不需要的浏览器工具栏5,并在他们不注意的时候更改他们的默认搜索和主页设置。我们都曾经是这种欺骗的受害者。
Sometimes it inches closer to the darkness, doing things like tricking people into installing an unwanted browser toolbar5 and changing their default search and Home page settings while they’re not looking. We’ve all been on the receiving end of this kind of deception.
5 [咳]雅虎[咳]
5 [cough] Yahoo [cough]
您单击链接即可下载一些免费软件。
You click on a link to download some free software.
这将打开一个带有三个大“开始下载”链接的屏幕。
This opens a screen with three big “Start Download” links.
没有注意到几乎看不见的说明,当没有发生任何事情时,您单击其中之一即可开始下载。
Not noticing the nearly invisible instructions, when nothing happens you click one of them to start the download.
出现一个新页面,其中包含另一个“开始下载”链接,因此您单击它...并最终下载了一些您不需要的软件。
A new page appears with another “Start Download” link, so you click it...and end up downloading some software you don’t want.
但在极端情况下,它可能会跨越界限,成为真正的黑帽行为,例如网络钓鱼、诈骗和身份盗窃。
At its extreme, though, it can cross the line into true black hat practices, like phishing, scamming, and identity theft.
请注意,如果人们要求您做任何这些事情,这不是您工作的一部分。
Just be aware that if people ask you to do any of this, it’s not part of your job.
用户指望着你。
The users are counting on you.
在结束之前,我想对坚持到现在的人有一点好处。
Before I wrap up, a little bonus for hanging in this far.
本书中的几乎所有内容都是关于可用性问题的答案在多大程度上取决于上下文,并且大多数可用性问题的答案是“这取决于”。
Almost everything in this book has been about how much the answer to usability questions depends on the context and that the answer to most usability questions is “It depends.”
但我知道我们都喜欢得到明确的答案,所以这里有一小部分你应该永远做或永远不做的事情。
But I know that we all love to have definitive answers, so here’s a tiny collection of things that you should always do or never do.
不要使用小尺寸、低对比度的字体。您可以使用大的低对比度类型,或小(好吧,小)高对比度类型。但切勿使用小型、低对比度的字体。(并且也尽量远离其他两个。)除非您正在设计自己的设计作品集网站,并且您真的,真的不关心是否有人可以阅读文本。
Don’t use small, low-contrast type. You can use large, low-contrast type, or small (well, smallish) high-contrast type. But never use small, low-contrast type. (And try to stay away from the other two, too.) Unless you’re designing your own design portfolio site, and you really, truly don’t care whether anybody can read the text or not.
不要将标签放在表单字段内。是的,它可能非常诱人,尤其是在狭窄的移动屏幕上。但除非所有这些都成立,否则不要这样做:表单非常简单,标签在您开始输入时消失,如果您清空字段则重新出现,标签永远不会与答案混淆,并且您不可能“最终将提交标签以及您输入的内容(“ Job Ti Assistant Manager tle ”)。并且您已确保它们完全可访问。
Don’t put labels inside form fields. Yes, it can be very tempting, especially on cramped mobile screens. But don’t do it unless all of these are true: The form is exceptionally simple, the labels disappear when you start typing and reappear if you empty the field, the labels can never be confused with answers, and there’s no possibility that you’ll end up submitting the labels along with what you type (“Job TiAssistant Managertle”). And you’ve made sure they’re completely accessible.
如果您不同意,在给我发送电子邮件之前,请搜索“不要在文本框中放置标签(除非您是 Luke W)”并阅读。
If you don’t agree, before you send me email please search for “Don’t Put Labels Inside Text Boxes (Unless You’re Luke W)” and read it.
保留已访问和未访问的文本链接之间的区别。默认情况下,Web 浏览器会以不同的颜色显示指向您已打开的页面的链接,以便您可以查看已尝试过的选项。事实证明这是非常有用的信息,特别是因为它是通过 URL 而不是链接的措辞进行跟踪的。因此,如果您点击“预订行程”,当您看到“稍后预订航班”时,您就知道它会将您带到同一页面。
Preserve the distinction between visited and unvisited text links. By default, Web browsers display links to pages that you’ve already opened in a different color so you can see which options you’ve already tried. This turns out to be very useful information, especially since it’s tracked by URL, not by the wording of the link. So if you clicked on Book a trip, when you see Book a flight later you know that it would take you to the same page.
您可以选择任何您想要的颜色,只要它们明显不同即可。
You can choose any colors you want, as long as they’re noticeably different.
不要在段落之间浮动标题。标题应该比其前面的文本更接近其后面的文本。(是的,我知道我提到过这是第 3 章,但它非常重要,值得重复。)
Don’t float headings between paragraphs. Headings should be closer to the text that follows them than the text that precedes them. (Yes, I know I mentioned this is Chapter 3, but it’s so important it’s worth repeating.)
就这些了,伙计们。
That’s all, folks.
正如鲍勃和雷常说的:“坚持住,找到工作就写。”
As Bob and Ray used to say, “Hang by your thumbs, and write if you get work.”
我希望您能时常访问我的网站stevekrug.com ,并随时向我发送电子邮件: stevekrug@gmail.com。我可以向你保证,我会阅读并欣赏它,即使我总是找不到足够的时间来回复。
I hope you’ll check in at my Web site stevekrug.com from time to time, and always feel free to send me email at stevekrug@gmail.com. I can promise you I will read it and appreciate it, even if I can’t always find enough time to reply.
但最重要的是,要高兴。正如我在一开始所说的,构建一个出色的网站或应用程序是一项巨大的挑战,任何能成功一半的人都会让我钦佩。
But above all, be of good cheer. As I said at the beginning, building a great Web site or app is an enormous challenge, and anyone who gets it even half right has my admiration.
请不要将我所说的任何内容视为反对违反“规则”——或者至少是扭曲它们。我知道甚至有些网站您确实希望界面能够让人们思考、困惑或挑战他们。只要确保你知道你要改变哪些规则,并且你至少认为你有充分的理由来改变它们。
And please don’t take anything I’ve said as being against breaking “the rules”—or at least bending them. I know there are even sites where you do want the interface to make people think, to puzzle or challenge them. Just be sure you know which rules you’re bending and that you at least think you have a good reason for bending them.
哦,顺便说一句,这是卡尔文和霍布斯的其余部分。
Oh, by the way, here’s the rest of Calvin and Hobbes.
卡尔文和霍布斯 © 1989 Watterson。经 UNIVERSAL UCLICK 许可转载。版权所有。
CALVIN AND HOBBES © 1989 Watterson. Reprinted with permission of UNIVERSAL UCLICK. All rights reserved.
...AND ALL I GOT WAS THIS LOUSY T-SHIRT
...以及福莱斯特号航空母舰的船员,没有他们的合作,这部电影永远不会制作。
...and the men of the U.S.S. Forrestal, without whose cooperation this film would never have been made.
——传统的电影致谢
—CONVENTIONAL MOVIE ACKNOWLEDGMENT
[在此插入“需要一个村庄”模因的一些变体。]
[Insert some variation of the “It takes a village” meme here.]
但这是真的。我不仅无法独自完成这件事,而且我也不想这样做。再次,我很幸运能够围捕那些帮助我完成早期版本和火箭手术的常见嫌疑人。
But it’s true. Not only couldn’t I have done this alone—I wouldn’t have wanted to. Again, I was fortunate enough to be able to round up the usual suspects who got me through the earlier editions and Rocket Surgery.
面对我的写作习惯,我深深地依赖了他们的善良和非凡的善意。
I have relied deeply on their kindness and their extraordinary goodwill in the face of my writing habits.
和往常一样,我与时间的特殊关系让每个参与其中的人都感到困难。(你有没有听过这样一句话:“如果不是最后一分钟,我根本就什么也做不了”?)老实说,只是有人在我不注意的时候把我的时钟调快了。
As usual, my peculiar relationship to time has made life difficult for everyone involved. (Have you ever heard the expression “If it weren’t for the last minute, I wouldn’t get anything done at all”?) Honestly, it’s just that someone keeps setting my clock ahead every time I’m not looking.
感谢——并且在大多数情况下道歉——是由于
Thanks—and in most cases apologies—are due to
伊丽莎白·贝尔(Elisabeth Bayle),多年来一直是我的对话者、参谋和朋友,而且——尽管她不想承认——还是本版的编辑。如果你要写一本书,我最好的建议是找到一个聪明、风趣、和你一样了解主题的人,然后说服他们花很长时间倾听,提出很好的建议,并提出建议。编辑你的作品。
Elisabeth Bayle, who has been my interlocutor, sounding board, and friend for some years now, and—even though she doesn’t want to admit it—editor of this edition. If you’re ever going to write a book, my best advice is to find someone who’s smart, funny, and knows as much about the subject matter as you do, and then convince them to spend long hours listening, making great suggestions, and editing your work.
如果没有她,这本书就不会出现(尽管事实并非如此)。除非我知道她会参与其中,否则我不会考虑这样做。我还要感谢埃利奥特,在与我一起度过漫长的一天工作后,她总是精神焕发。
It’s not so much that this book wouldn’t have happened without her (although it wouldn’t). It’s that I wouldn’t have considered doing it unless I knew she’d be involved. My thanks also go out to Elliott for always renewing her spirits after another long day working with me had drained them.
芭芭拉·弗拉纳根 (Barbara Flanagan),文案编辑,亲爱的老朋友。套用一个古老的笑话来说,“芭芭拉在她的一生中从未在语法点上犯过错误。嗯,有一次她以为自己错了,但事实并非如此。” 在你写信告诉我一些使用错误之前,请注意芭芭拉很久以前就先于你,然后说:“但这是你的声音。你的书。你的来电。” 这就是慷慨的精神。
Barbara Flanagan, copy editor and dear old friend. To paraphrase an old joke, “Barbara has never been wrong about a point of grammar in her life. Well, there was that one time when she thought she was wrong, but she wasn’t.” Before you write me about some error in usage, be aware that Barbara long ago beat you to it, and then said, “But it’s your voice. Your book. Your call.” That’s generosity of spirit.
南希·戴维斯 (Nancy Davis),Peachpit 的主编,她离开办公桌的距离刚好足以成为我的参谋和支持者。她是少数人中的一员,其赞扬的意义大约是普通赞扬的十倍。我会非常怀念有借口和她谈论她热爱鸟类学的男孩们。
Nancy Davis, editor-in-chief at Peachpit, who stepped away from that desk just far enough to be my consigliere and champion. She’s one of those rare people whose praise means about ten times as much as normal praise. I will deeply miss having an excuse to chat with her about her ornithology-lovin’ boys.
Nancy Ruenzel、Lisa Brazieal、Romney Lange、Mimi Heft、Aren Straiger、Glenn Bisignani以及 Peachpit 的所有其他聪明、友善、有才华、勤奋的人都给予了我如此的支持(我敢肯定,他们常常咬紧牙关)。
Nancy Ruenzel, Lisa Brazieal, Romney Lange, Mimi Heft, Aren Straiger, Glenn Bisignani, and all the other smart, nice, talented, hardworking people at Peachpit who have been so supportive (often while biting their tongues, I’m sure).
我的审稿人——卡罗琳·贾勒特(Caroline Jarrett)和惠特尼·奎森伯里(Whitney Quesenbery) ——自愿贡献了一些宝贵的时间来防止我显得愚蠢。在另一个时代,对他们的正确描述应该是“同路人”。我们在很多事情上看法一致,而我只是肤浅,喜欢与那些同意我观点的人在一起。然而,为了保护无辜者,我不得不指出,列入此列表并不意味着同意本书中的所有内容。
My reviewers—Caroline Jarrett and Whitney Quesenbery—who volunteered some of their precious time to keep me from appearing foolish. In another time, the right description for them would have been “fellow travelers.” We see eye to eye on many things, and I’m just shallow enough to enjoy the company of people who agree with me. To protect the innocent, however, I feel compelled to note that inclusion in this list does not imply agreement with everything in this book.
感谢Randall Munroe对重印他的作品的慷慨态度,以及这些年来在xkcd.com上给我和我的儿子带来的很多笑声。1
Randall Munroe for his generous attitude about reprinting his work, and for giving my son and me a lot to laugh about over the years at xkcd.com.1
1 如果你不“明白”其中的一些内容,有一个家庭手工业网站会向你解释它们,就像雷克斯·帕克在《纽约时报》上每天做填字游戏一样。
1 If you don’t “get” some of them, there’s a cottage industry of sites that will explain them to you, in the same way that Rex Parker does with each day’s crossword puzzle in The New York Times.
聪明而有趣的同事,如Ginny Redish、Randolph Bias、Carol Barnum、Jennifer McGinn、Nicole Burden、Heather O'Neill、Bruno Figuereido和Luca Salvino。
Smart and funny colleagues like Ginny Redish, Randolph Bias, Carol Barnum, Jennifer McGinn, Nicole Burden, Heather O’Neill, Bruno Figuereido, and Luca Salvino.
贡献了特定知识的人,如Hal Shubin、Joshua Porter、Wayne Pau、Jacqueline Ritacco以及哥本哈根贝亚德研究所的人们。
People who contributed specific bits of their knowledge, like Hal Shubin, Joshua Porter, Wayne Pau, Jacqueline Ritacco, and the folks at the Bayard Institute in Copenhagen.
感谢卢·罗森菲尔德(Lou Rosenfeld)的道义支持、良好的建议以及做卢·罗森菲尔德。
Lou Rosenfeld for moral support, good counsel, and for just being Lou.
凯伦·怀特豪斯(Karen Whitehouse)和罗杰·布莱克(Roger Black),这本书的精神教母和教父,是他们在 14 年前给了我撰写第一版的机会,从而让我陷入了困境。
Karen Whitehouse and Roger Black, the spiritual godmother and godfather of the book, who got me into this mess in the first place by giving me the opportunity to write the first edition 14 years ago.
由可用性专业人士组成的大型社区,他们往往是一群非常友善的人。参加年度 UXPA 会议并亲自了解一下。
The large community of usability professionals, who tend to be a very nice bunch of folks. Go to an annual UXPA conference and find out for yourself.
普特汉姆圆环星巴克的友好咖啡师,通常是我白天除了妻子之外唯一见到的人。(当公司最近重新设计这个地方时,他们认为良好的照明并不是人们真正需要的,这不是他们的错。)
The friendly baristas at the Putterham Circle Starbucks, often the only people I see during the day other than my wife. (It’s not their fault that when corporate redesigned the place recently they decided that good lighting wasn’t something people really needed.)
我的儿子哈利现在正在 RPI 完成学位,我比他更珍惜他的公司。我经常要求他再向我解释一次模因和比喻之间的区别,从而耗尽了他的耐心。
My son, Harry, now finishing his degree at RPI, whose company I treasure more than he knows. I exhaust his patience regularly by asking him to explain to me just one more time the difference between a meme and a trope.
如果有人有认知科学专业辅修游戏设计的职位空缺,我很乐意将其传递给您。
If anyone has a job opening for a Cognitive Science major with a minor in Game Design, I’ll be happy to pass it on.
最后,梅兰妮只有一个已知的缺点:遗传性的缺乏迷信,这导致她会说“嗯,我整个冬天都没有感冒。” 除此之外,正如我经常说的,我是最幸运的丈夫之一。
And finally, Melanie, who has only one known failing: an inherited lack of superstition that leads her to say things like “Well, I haven’t had a cold all Winter.” Apart from that, I am, as I say so often, among the most fortunate of husbands.
如果你希望自己的生活过得好,那就嫁得好。
If you’d like your life to be good, marry well.
$25,000 金字塔, 36
$25,000 Pyramid, 36
Animal, Vegetable, or Mineral?, 42–47
苹果,143
Apple, 143
普通用户,9
average user, 9
争分夺秒,85
Beat the Clock, 85
网页设计大爆炸理论,89
Big Bang Theory of Web Design, 89
谢尔盖·布林,26 岁
Brin, Sergey, 26
浏览主导用户,59
browse-dominant users, 59
浏览器
browser
用户所说的,26
what users say it is, 26
布伦德弗莱,162
Brundlefly, 162
缅甸剃须刀,29
Burma-Shave, 29
层叠样式表 (CSS)
Cascading Style Sheets (CSS)
和可达性,181
and accessibility, 181
最早使用, 37
earliest use of, 37
和可用性,171
and usability, 171
巴德·科利尔,85 岁
Collyer, Bud, 85
文化冲突,107
culture clash, 107
设计
designing
主页,84
Home page, 84
导航, 54
navigation, 54
Web sites, intention vs. reality, 21, 23
自己动手进行可用性测试,115
do-it-yourself usability testing, 115
风格元素, 49 _
Elements of Style, The, 49
专家可用性审查,3
expert usability review, 3
“农民和牛人应该成为朋友,” 102
“Farmer and the Cowman Should Be Friends, The,” 102
字体大小,在浏览器中,173
font size, in browser, 173
golden goose, temptation to kill, 99–100
韩塞尔和格蕾特,79
Hansel and Gretel, 79
愉快的谈话,消除,50
happy talk, eliminating, 50
哈奇,参议员奥林,网站,viii
Hatch, Sen. Orrin, Web site, viii
福尔摩斯,夏洛克,7
Holmes, Sherlock, 7
主页
Home page
杂乱, 39
cluttered, 39
设计, 84
designing, 84
愉快的谈话,50
happy talk on, 50
链接到,70
link to, 70
悬停, 152
hover, 152
instructions, eliminating, 51–52
Jarrett, Caroline, 40, 46, 194
“皮划艇”问题,139
“kayak” problems, 139
凯鹏华盈,艺术,107
Kleiner, Art, 107
Krug’s laws of usability, 10–11, 43, 49
加里·拉尔森,23 岁
Larson, Gary, 23
亚伯拉罕·林肯,145
Lincoln, Abraham, 145
链接主导型用户,59
link-dominant users, 59
链接,已访问与未访问,190
links, visited vs. unvisited, 190
标识。查看 站点 ID
logo. See Site ID
记忆力, 159
memorability, 159
门施,164
mensch, 164
镜像, 161
mirroring, 161
使命宣言,95
mission statement, 95
移动的
mobile
应用程序, 155
apps, 155
可用性测试,160
usability testing, 160
名称,重要性,14
names, importance of, 14
导航
navigation
公约, 64
conventions, 64
设计, 58
designing, 58
下层,72
lower-level, 72
坚持不懈,66
persistent, 66
揭露内容,63
revealing content, 63
needless words, omitting, 48–52
新功能请求,139
new feature requests, 139
雅各布·尼尔森,xi , 54 , 58 – 59 , 96 , 115 , 121
Nielsen, Jakob, xi, 54, 58–59, 96, 115, 121
噪音。查看 视觉噪声
noise. See visual noise
诺曼·唐,151
Norman, Don, 151
页面名称
page name
匹配用户点击的内容,76
matching what user clicked, 76
页上的位置,75
position on page, 75
持续导航,66
persistent navigation, 66
主要导航。参见 章节
primary navigation. See Sections
王子与乞丐, 26
Prince and the Pauper, The, 26
适合打印的页面,171
printer-friendly pages, 171
促销
promos
内容促销,86
content promos, 86
专题促销,86
feature promos, 86
pull-down menus, limitations of, 108–09
recruiting test participants, 120–21
珍妮丝·雷迪什(金妮), 40 , 41 , 46 , 179 , 194
Redish, Janice (Ginny), 40, 41, 46, 179, 194
重新发明轮子,31
reinventing the wheel, 31
religious debates, 103, 104, 109
设计网站的“正确”方法,7
“right” way to design Web sites, 7
路易斯·罗森菲尔德,194
Rosenfeld, Louis, 194
信息的气味,43,
scent of information, 43,
script for usability test, 125, 127–36
搜索框, 16 – 17 , 30 , 58 , 71 – 72 , 86 , 99
search box, 16–17, 30, 58, 71–72, 86, 99
在主页上,86
on Home page, 86
选项, 71
options, 71
措辞,71
wording, 71
搜索主导用户,58
search-dominant users, 58
二次导航。参见 小节
secondary navigation. See subsections
正面部分,50
section fronts, 50
能指, 151
signifiers, 151
嘶嘶声, 169
sizzle, 169
加载缓慢的页面,59
slow-loading pages, 59
停车标志,29
stop signs, 29
颜色编码,81
color coding, 81
正确绘画的重要性,81
importance of drawing correctly, 81
会说话的头像,55
Talking Heads, 55
玛丽·塞奥法诺斯,179
Theofanos, Mary, 179
公地悲剧,100
tragedy of the commons, 100
可用性
usability
的属性,155
attributes of, 155
定义, 9
defined, 9
可用性实验室,115
usability lab, 115
自己动手,115
do-it-yourself, 115
测试用户数,119
number of users to test, 119
观察员,124
observers, 124
recruiting participants, 120–21
远程, 140
remote, 140
示例会话,127
sample session, 127
未经审核,140
unmoderated, 140
尽早开始的价值,115
value of starting early, 115
测试什么,124
what to test, 124
User Experience Design (UXD, UX), x, 183
UserTesting.com,140
UserTesting.com, 140
验证器,可访问性,177
validator, accessibility, 177
视觉噪音,38
visual noise, 38
欢迎标语,93
Welcome blurb, 93
白色,EB,49
White, E. B., 49
xkcd, 194
xkcd, 194
马克·扎克伯格,26 岁
Zuckerberg, Mark, 26
多年来众所周知,可用性测试可以极大地改进产品。但可用性顾问进行每轮测试的典型价格为 5,000 至 10,000 美元,这种情况很少发生。
It’s been known for years that usability testing can dramatically improve products. But with a typical price tag of $5,000 to $10,000 for a usability consultant to conduct each round of tests, it rarely happens.
在《别让我思考:Web 可用性的常识方法》的指导手册中,Steve Krug 阐述了一种简化的可用性测试方法,任何人都可以轻松地将其应用到自己的网站、应用程序或其他产品中。(正如他在《别让我思考》中所说,“这不是火箭手术”。)
In this how-to companion to Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug spells out a streamlined approach to usability testing that anyone can easily apply to their own Web site, application, or other product. (As he said in Don’t Make Me Think, “It’s not rocket surgery”.)
史蒂夫利用实用的建议、大量的插图和他标志性的幽默,解释了如何:
Using practical advice, plenty of illustrations, and his trademark humor, Steve explains how to:
• 测试任何设计,从餐巾纸上的草图到功能齐全的网站或应用程序
• Test any design, from a sketch on a napkin to a fully functioning Web site or application
• 集中精力寻找最重要的问题(因为没有人有时间或资源来解决所有问题)
• Keep your focus on finding the most important problems (because no one has the time or resources to fix them all)
• 使用他的“至少你能做的”方法解决你发现的问题
• Fix the problems that you find, using his “The least you can do” approach
通过将测试和修复产品的过程简化为基本要素(“每个月一个早上,这就是我们所要求的”),Rocket Treatment使团队能够尽早且频繁地进行测试,在仍然很容易修复问题的同时发现问题。《火箭手术变得简单》使用了同样经过验证的清晰写作、前后示例、诙谐插图和实用建议的组合,这使得《别让我思考》立即成为经典。
By paring the process of testing and fixing products down to its essentials (“A morning a month, that’s all we ask”), Rocket Surgery makes it realistic for teams to test early and often, catching problems while it’s still easy to fix them. Rocket Surgery Made Easy uses the same proven mix of clear writing, before-and-after examples, witty illustrations, and practical advice that made Don’t Make Me Think an instant classic.
Steve Krug(发音为“kroog”)最出名的身份是《Don’t Make Me Think: A Common Sense Approach to Web Usability》一书的作者,该书现已出版第三版,印刷量超过 350,000 册。十年后,他终于积攒了足够的精力,写了另一本:可用性测试手册《火箭手术变得简单》。这些书是根据他作为可用性顾问 20 多年的经验,为 Apple、Bloomberg.com、Lexus.com、NPR、国际货币基金组织等众多客户提供的。
Steve Krug (pronounced “kroog”) is best known as the author of Don’t Make Me Think: A Common Sense Approach to Web Usability, now in its third edition with over 350,000 copies in print. Ten years later, he finally gathered enough energy to write another one: the usability testing handbook Rocket Surgery Made Easy. The books were based on the 20+ years he’s spent as a usability consultant for a wide variety of clients like Apple, Bloomberg.com, Lexus.com, NPR, the International Monetary Fund, and many others.
他的咨询公司 Advanced Common Sense 位于马萨诸塞州切斯纳特山。Steve 目前的大部分时间都花在了可用性研讨会的教学、咨询以及观看 30 年代和 40 年代的黑白电影上。
His consulting firm, Advanced Common Sense is based in Chestnut Hill, MA. Steve currently spends most of his time teaching usability workshops, consulting, and watching black-and-white movies from the ’30s and ’40s.
火箭手术变得简单:查找和解决可用性问题的自助指南
Steve Krug,ISBN:9780321657299
www.newriders.com
Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems
Steve Krug, ISBN: 9780321657299
www.newriders.com